Handling spacing for mobile projects can be a drag. It can be hard to stay consistent and not change spacings as you go along; content shifts during the design phase and makes you move everything around (a boring, repetitive task); and Sketch’s default settings don’t always play nice.

‍

We’re happy to show you one of the small projects we tackled during one of our design meetups: an improved way of working with spacings in Sketch! Smaller fixes like these can have a big impact and speed up your workflow, which is why we’re happy to spill the beans. Go ahead and download our Spacer plugin already. 

Spacing

‍

‍

First, to remove all inconsistencies, we defined a fixed set of spacings to use, with a predefined typescale (eg. 8 16 24 32 40 48 72 144). We started by integrating these spacings in all of our starting templates, which are synced across our design team for every project.

A quick tip: if you’d like to know more about syncing templates with Sketch and Dropbox, check out this excellent blog post.

‍

The next step, of course, was ensuring that we’d truly limit ourselves to this set of spacings!

‍

To achieve that, we add these spacing blocks in our designs, between our components.

‍

‍

Stacking

‍

This is an easy way to enforce consistent spacing, but it creates a new set of problems – or rather, of annoying, repetitive work. Unlike a website or app, Sketch doesn’t automatically stack content. So whenever we add an extra line of text or a new element, we have to manually adjust our spacings and then reposition every element underneath. We’ve all been there, and it’s not fun.

‍

‍

Luckily, there was Anima App, which lets us use stacks to mimic this behaviour. Implementing this plugin improved things tremendously: when we now add more spacing or add some extra text to elements, all elements below will automatically move. Magic!

‍

Spacing symbols and stacking

‍

So to keep our spacings consistent and limited, we want to use Sketch’s symbols. This will allow us to switch quickly between our different predefined spacing blocks to and see the impact on our design. The issue we were having was that when you changed a symbol – for instance, a 16x16 spacing block to a 32x32 spacing block –you would have to right click and press set to original size every time. Not very efficient, is it?

‍

But thanks to Geert, our Sketch plugin master, we found a way to trigger the “set to original size” whenever we change a spacing symbol to a new symbol. And of course, this will only happen when we change a spacing symbol and not when we change other symbols – that would create all kinds of problems! Oh, and as a little extra: the layer name is also automatically updated to match the name of the new symbol.

Thanks to this little workaround, we can now easily changes spacings in our designs! Using symbols for spacings forces us to limit our spacings to a fixed set, and Anima App makes our design react accordingly, so we don’t have to manually change our layout every time we change a spacing or add some extra copy.

‍

Another tip: you can toggle between the visibility of the spacings by using the show bounding boxer plugin.‍