Spacing Tokens

Spacing tokens give you the ability to define values for Auto Layout that you can reuse. Once you apply a spacing token to a layer, it will be updated whenever you change that token. Therefore, any layer containing a reference to {spacing.container} will also be updated when you modify that specific token.

How to use#

1. Add a new token in the Spacing type.
2. Select or create a layer with Auto-layout(does not work on any other layer type).
3. Once selected, you can apply a spacing token by either left-clicking (all values will have this token applied) or right-clicking and then specifying which part or side of the layer you want to target like: Gap, All, Top, Right, Bottom, Left . If you want to apply left-right and top-bottom with a click, you can select horizontal-padding or vertical-padding to apply them respectively.

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
8px 64px

Three values
This will apply top | right-and-left | bottom
16px 8px 32px

Four values
This will apply top | right | bottom | left
2px 4px 8px 16px