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.

Lennon Cheng
UX Collective
7 min readJun 12, 2020
Cover: Hi, call me spacer

II 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:

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Published in UX Collective

We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc

Written by Lennon Cheng

🔍 Product Designer at Canva · 🌈 Podcaster for Queers · 🔗 lennonzf.me

Responses (12)

We're lucky to have you Jake!

--

Thanks for sharing

--

If I understand correctly the main challenge of the design even in this digital era still lies in marrying form and function 🙂

--