Member-only story
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.