Available tokens
Spacing tokens

Spacing Tokens

Spacing tokens give you the ability to define values for Auto Layout that you can reuse. Once you applied a spacing token to a layer, it will get updated whenever you change that token, so any layer containing a reference to {spacing.container} will get updated, when you update that specific token.

How to use

In order to make spacing tokens work, start by creating tokens in the Spacing category.

Then, select or create an Auto Layout layer (it will not work on any other layer type!)

Once selected, apply Spacing tokens by either left-clicking (all values will use this token) or right-click to specify which part of the Auto Layout you want to target (Gap, All, Top, Right, Bottom, Left)


Multi-value spacing tokens

To save a lot of time, we introduced the multi-value spacing tokens. This allows you to specify spacing just for the horizontal or vertical padding. You are able to define one, two, three or four values, just like CSS.

Single value (like today)
Clicking this on radii will apply to all corners (like today)
Clicking this on spacing will apply to the gap property (like today)
10px

Two values
Clicking this on radii will apply top-left-and-bottom-right | top-right-and-bottom-left
Clicking this on spacing will apply top-and-bottom | left-and-right
10px 5px

Three values
Clicking this on radii will apply top-left | top-right-and-bottom-left | bottom-right
Clicking this on spacing will apply top | right-and-left | bottom
2px 4px 2px

Four values
Clicking this on radii will apply top-left | top-right | bottom-right | bottom-left
Clicking this on spacing will apply top | right | bottom | left
1px 0 3px 4px


Last updated on October 22, 2022