Design like a developer with Anima App and spacings

profile picture

Michiel

Experience designer

3 Jun  ·  4 min read


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

So to give you some background: we recently reformed the way we approach internal improvements at November Five. Each team now has bi-weekly 4-hour slots to focus entirely on improvements. This makes us work faster and more efficiently and helps us produce better quality.

We’re happy to show you one of the small projects we tackled during one of these 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. And if constant improvements sound like your jam: we’re still looking for UI designers!

Spacing

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.

First, to remove all inconsistencies, we defined a fixed set of spacings to use, with a predefined scale (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.

Spacings Sketch Stickersheet
Our stickersheet with spacings.

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.

Spacings in design

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 in-house 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 everytime 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.

Animaapp update

Now show me the money!

So how does this work?

  • When you change a symbol that starts with the string “@spacing” (default) and deselect, our plugin will automatically trigger Sketch’s “reset to original size” function. The symbol will be updated, and its size will be updated to the new symbol’s original size.
  • As a default, the spacings layer names should always start with “@spacing”: @spacing-16, spacing / @spacing-32,… This is the naming we use, but you can change this to match your own conventions in the Settings.
  • Unlike Sketch’s own default setting, our plugin updates the layer name to match the name of the updated symbol.

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


profile picture

Michiel

Experience designer

3 Jun  ·  4 min read