Copied to clipboard

Design like a developer with Anima App and spacings

Ever struggled with dynamic spacings in Sketch? We've got a workaround, using Anima App and our own plugin!

April 25, 2018
min read

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. 


Our stickersheet with spacings

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.


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.

Update: Animaapp recently updated their plugin with a new feature called “collapsing stacks”. This means you can now choose whether a stack ignores hidden layers in the group or not.

But when using our system and plugin, toggling the layer from visible to invisible will mess up your design because the stacks will ignore the spacings. Luckily, you can turn this new option off by selecting your stacked group and clicking on the stack folder icon in the auto-layout panel. There you can uncheck “collapsing”, and be on your merry way again.

Now show me the money!

So how does this work?

Want to take it for a spin? You can download our Spacer plugin here!

Stay up-to-date with November Five

Follow us on LinkedIn for insights, learnings, use cases and more.

No items found.

Read further

Written by

Michiel Van Nueten


UI Designer

Michiel will translate any brand book into a on-brand digital interface. Proud designer of this very website. On top of that, his expertise in animation only strengthens his capabilities. He’s not backing down from taking the 35km commute by bike. Choosing a biking holiday through Spain over a lazy beach holiday any time.