Ever struggled with dynamic spacings in Sketch? We've got a workaround, using Anima App and our own plugin!
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.
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!
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.
UI Designer
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.
So how does this work?
Want to take it for a spin? You can download our Spacer plugin here!
UI Designer
Follow us on LinkedIn for insights, learnings, use cases and more.
Let’s get to know each other better and explore how we can help your business embark on a journey towards digitally enabled success.
Working in collaboration with Penny Black and its joint venture incubators, Agfa and ninepointfive, November Five delivered a technology project that strengthened Penny Black’s business case and lowered its backers’ investment risk.
Our Vanbreda Healthcare platform has been awarded a UX Design Awards nomination by International Design Center Berlin – the leading, independent design institution promoting design as a driver for business and social innovation.
November Five was named one of Fast Company’s global 100 Best Workplaces for Innovators in both 2020 and 2021. This annual list, developed in collaboration with Accenture, recognises and honors the top 100 businesses from different industries that inspire, support and promote innovation at all levels. For the consecutive year, November Five was the single Belgian workplace listed.
Fast Company is the world's leading progressive business media brand, with a unique editorial focus on innovation in technology, ethical economics, leadership, and design. Written for, by, and about the most progressive business leaders, Fast Company and FastCompany.com inspire readers and users to think beyond traditional boundaries, lead conversations and create the future of business.
