Tokenise the auto-layout spacings?

Ask the community
1

Hey, fellows
What’s the best practice for storing / applying / handoff the auto-layout properties like spacings?

The goal is to create flexible Stack component which is easy to use for designers to build stuff with and handoff to devs later. Some of the requirements are:

  • Spacings should be controlled via tokens: {px: small; mt: large}. I’ll use Figma Tokens plugin to achieve that
  • Allow to override certain spacings to the custom values
  • Easy to handoff to the devs

I’m considering two options: vanilla auto-layout and spacer components

I. Use vanilla auto-layout

Pros:

  • Ease to use and maintain
  • Doesn’t require extra components to handle layout
  • Familiar to most of the designers and devs

Cons:

  • No built in way to apply tokens for the spacers. Plugin is required
  • No built in way to see applied tokens. Plugin is required.
  • You need to remember and share which spacings tokens should be applied for the specific use cases

II. Use spacer components to handle spacings

Pros:

  • Once created, are handled as regular Figma components. No plugin required
  • Can be changed using Figma tokens. Easy to bulk override values
  • Self explanatory and easy to handoff. No extra documentation is required

Cons:

  • Harder to use and maintain
  • Requires extra components to handle layout, which might lead to the file slowdown eventually
  • Can’t easily handle certain cases

image
image1996×1560 165 KB

2 Likes
2

Unfortunately there is no good solution yet. Plug-in doesn’t seem reliable, I would not risk my working copy with it. Once you have it in your system it’s extremely hard to get rid of it. Not sure how stable it is. Also it is slow…

On the other hand spacing component brings significant overhead to a layer structure. Have no idea how it would work in a long run, I am afraid it would impact performance in a negative way. One thing I like though is when I turn on layout grids and see spaces all over the place, somewhat satisfying :wink:

Anyway, I am in the middle of my own evaluation, maybe others have something to say

3

I’m currently evaluating using Figma Tokens for any design token that can’t be managed natively. Not sure it’s the best practice, but feels like it’s the most robust way forward for now.

I really wish for Figma to integrate Design Tokens in a way natively.

That would allow designers to work in an even closer way to how devs do, especially as design tokens are the one thing that can fully overlap both design and dev.

Like colours and typography, it should be possible to assign a spacing style, or a size value and even do simple maths operations on them.

Would love to read the opinions of the mods and the @Figma_Support as to why it isn’t yet possible, and if it’s in the works.