Copied to clipboard
Insights
Series

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!

17/11/2021
April 25, 2018
-
4
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. 



Spacing

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.


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.

Michiel Van Nueten

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.


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!

Michiel Van Nueten

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.


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!

17/11/2021
April 25, 2018
-
4
min read

We help companies
succeed in the digital age

Stay up-to-date with November Five

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

Looking for a partner that thinks beyond delivery?

We help companies
succeed in the digital age

Let’s get to know each other better and explore how we can help your business embark on a journey towards digitally enabled success.

CONTACT US
Series
DISCOVER MORE INSIGHTS
Chevron
About Fast Company’s ‘Best Workplace for Innovators’

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.

Jeroen Van Winckel

Product Strategy Designer

Ralph Van Tongelen

Finance Director

Office

Office

Dario Prskalo

Associate to the executive team

Brecht Spileers

Chief of Staff & Director Corporate Strategy

Emily Stewart

Senior Content Writer

Rindert Dalstra

Brand & Marketing Director

Robin Van den Bergh

Managing Director at Appmiral

Maarten Raemdonck

Co-founder & Managing Director at Spencer

Phillip Vandervoort

Executive advisor - Strategy

Vincent Bruyneel

CFO & COO

David Du Pré

Executive advisor

Marc Wojciechowski

Assistant Director

Muriel Mwema

Director Product Management & Delivery

Nick Verbaendert

Co-Founder & Director Business Operations

David De Bels

Product Owner at Appmiral

Tom Vroemans

Co-founder & CEO

Veronique Verhees

Talent Manager

Jens Reynders

Engineer

Michiel Van Nueten

UI Designer

Samuel De Pooter

Engineer

Bert Hofmans

UI Designer

Stijn Symons

Director Architecture

Vincent Pauwels

Co-founder & Director Experience Design

Thomas Van Sundert

Co-founder & Director Engineering

Justin Mol

Director Client Partnerships

Leslie De Cuyper

Client Partner

Ruben Van den Bossche

Chief Operating Officer

Nikki Jacobs

Managing Director at The Market