Worry less about spacing in Figma

Use spacers and auto-layout in Figma to speed up your spacing game in interface design.

I spend way too much time caring about spacing when designing interfaces and building design systems. You are probably no stranger to the constant 1 px and 8 px nudging, continuous checking of the bottom or in-between space for a previous component you have created, or the classic coming back to tweak everything in a series of frames just because you have changed the size of one single component.

Here’s a solution: try setting up a set of spacer components and use auto-layout in Figma.

Before you read on, here’s a quick demo video in loom.

☝🏿 I am assuming…

• You care about spacing in interface design.
• You use Figma (if not, the concept of spacer may still apply to other design tools).
• You are familiar or willing to read a bit about the 8pt grid system (so you don’t have to question why every number in this approach is set up to be divisible by 8).

Note: Screenshots in this article references my design work for Our Watch at my studio Today.

🤔 When I say “I want to worry less about spacing”, I mean: