Layout Experiments in Adobe Illustrator
As designers, we need tools that expose us to layout, that let us test and explore layout variations, and most importantly make the best decisions. Today, tools like Antetype, Figma, Adobe XD, and Affinity Designer are leading the way with innovative layout features that can save us from tedious tasks like updating the same margin 20 times or the pain of scaling one design to different device sizes.
Unfortunately, these tools are mostly unavailable on Windows. My teammates at Microsoft largely prefer to work in Adobe Illustrator because it’s cross-platform. Not wanting to be left out, I started researching potential solutions. I ended up creating an Illustrator extension called Bloks which takes a new approach to layout.
Shapes that stick together.
Bloks uses stack-based layout. When art is placed in a BlokGroup with an orientation (vertical or horizontal), the BlokGroup keeps them stacked in that direction, edge to edge, no matter what you do.
Basic, but combined with a few extra features you can create just about any layout. Perhaps the most powerful feature is the ability to place symbols in BlokGroups. Resize a symbol once and all the BlokGroups it’s used in move to make room for it.
0% opacity symbols form the spacing between each list item. An update to the root symbol cascades to every BlokGroup its used in. The result is that the height of a single symbol controls the list’s density.
Access to such a primitive layout mechanism has the benefit of allowing designs that other tools do not.
You can easily stack variable-height items. Tools like Adobe XD’s Repeat Grid require each item to be the same height.
You can also give objects flexibility, which allows them to fluidly resize.
The flexibility property applies to children of a BlokGroup. It can be hard to understand at first. Experiment with values of 1 and 2 to get a feel for how it works.
These features come together to enable powerfully complex layouts, all within Illustrator.
The same design can quickly be fit to different sized artboards. Strings expand to fit their new containers.
I’ve been able to try Bloks out with several designers for a few months. It turns out that stack-based layout is extremely easy to learn, easier than the constraints Figma uses or the box model used by Antetype.
Stack-based layout is also extremely powerful. However, certain scenarios (like pinning an object 12px from the artboard’s right edge) are not intuitive (constraints make more sense in that case). Using symbols within stack-based layout is a huge time saver. You can change 20 margins in a few clicks. It would be even better with support for dynamic symbols (similar to symbol overrides in Sketch) as entire components could be turned into symbols.
Conclusion
I’m convinced that layout is a growing pillar of design, alongside giants like typography, color, and motion. As our industry’s tools evolve, I hope they add options for stack-based layout, maybe in conjunction with constraints so that everyone can explore this space.
You can try Bloks if you have Illustrator. Let me know if you have a problem by creating a new issue. Share your experience, frustration, or delight with me in the comments or on Twitter.
Under the hood, it’s all powered by flexbox (thanks for the tip Matej) and lot of long nights.