Exploring Dynamic Layout in Sketch

If you design interfaces, you probably often work with repeating elements, like rows in a table or a grid of items. While Sketch provides some way of applying the same style to many elements via symbols, it has its shortcomings if you want to make the layout a little more adaptive and dynamic.

A couple of times in the past when I’ve encountered a layout-heavy project where I had to iterate quickly (like for example re-designing the About page in Facebook profiles), I skipped the Sketch part altogether and jumped right into HTML/CSS. While it’s an option, it has its own set of limitations that slow you down, like switching context between HTML,CSS and the browser.

As I found myself working with table layout in Sketch again and re-aligning every individual cell in a table for the umpteenth time, I started wondering whether there’s something I can do that would combine the WYSIWYG nature of Sketch with the power of prototyping with HTML and CSS.

Turns out I didn’t have to look too far. There’s a nifty CSS Layout library that’s part of Facebook’s React Native project — it’s basically the CSS FlexBox layout implemented in Javascript. It took me a couple of nights to put together a basic proof-of-concept plugin for Sketch:

A layer named @stylesheet and a keyboard shortcut for the plugin

This already makes things that were previously very tedious — like changing a padding — much, much faster. The next thing I needed to get working was text. This is a bit tricky and I’ve hacked it with a very inefficient method, but it works as expected with both auto-sized and fixed-sized text layers, multiple line heights and text sizes.

Re-positioning and resizing everything manually here would be quite tedious

Now this is still a pretty basic example, and real-life layouts are often far more complex. Let’s try and put together a table view with some cells— An image, name, subtext and some kind of accessory on the right.

A workflow like this allows us to quickly iterate on sizes and paddings of everything while the tedious part of re-aligning the whole layout after a change is taken care of automatically.

Some other advantages over using symbols for this use case are starting to be pretty clear:

You can re-order layers just by re-ordering them in the layer panel

Working with multiple screen sizes is much easier

Unlike Symbols, you can omit some elements and the layout will adjust

Layout is not bound to visuals — groups can share the layout yet look completely different

A step further — Prototypes

One place where symbols triumph over this approach is the ability to change things visually rather than editing some text over and over. On top of that, keeping track of the growing stylesheet layer quickly became a pain point.

A natural thing to do is to find a way to represent the stylesheet visually inside of Sketch. To achieve this I reached for something we usually use when we spec things for engineers — rectangles and lines representing paddings, margins, widths and sizes:

If I were to spec the previous example’s layout, it would probably look like this

Turning that into a prototype is as easy as naming the layers properly and adding a couple of styles that are somewhat difficult to represent visually (these layers can later be hidden so they’re not distracting).

I added a @size property that supplies both width and height

Now let’s try this in action with the table from above. Behind the scenes, the prototype’s properties get translated into individual styles and appended to the stylesheet.

You can notice the style layers are not re-aligning. This is still a work-in-progress and I’m trying to figure out whether people would prefer these to follow their parent elements or not

Working as expected, we can now edit the layout of our table visually, without having to jump back and forth between designing and editing a text layer. The stylesheet now only represents the group, and if we wanted to, we can turn that into a prototype, too — I usually keep it around for smaller things that wouldn’t necessarily need a prototype. Here’s an example of a layout built entirely with prototypes.

On top of the previous cell prototype, we now have a table prototype with padding and width, and a section header prototype with bottom padding different from the rest.

Now this is by all means not an effort to replace symbols in Sketch, but complement them with a dynamic layout engine that makes a lot of the tedious tasks much easier. Symbols are great on their own, and can even complement prototypes — you can make a @padding layer into a symbol and share it across prototypes.

Next steps

This plugin is a work-in-progress — it’s pretty slow and has a couple of bugs. Still, I’d love for people to try it out, give me feedback on the way it works and how it could be better, or even contribute to help polish it faster.

It has already saved me quite some hours of work and I’d love to see more people benefit from it. Here’s the GitHub repo if you want to give it a try:

Sketch-Flex-Layout

I built this as a side project at Facebook. If you are a designer and like working on tools, please reach out! We’ve recently kicked off a dedicated Design Tools initiative and we’re hiring.