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)
This will apply to the gap property (like today)
10px

Two values
This will apply top-and-bottom | left-and-right
10px 5px

Three values
This will apply top | right-and-left | bottom
2px 4px 2px

Four values
This will apply top | right | bottom | left
1px 0 3px 4px