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.
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.
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:
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:
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).
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.
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.
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.
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:
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.