The spacing design tokens require a manual set up in the Figma file from which the Export Design Tokens plugin is run.
Initial set up
There are two parts to creating spacing tokens: creating the spacing token nodes and the parent container.
The parent container is the target that is specified in the plugin for where the plugin should look for spacing tokens. This is set in the first dropdown of the plugin on the initial load. The plugin will look for any
instance on the active page from where the plugin is run as a possible target. Once a target has been selected it will be automatically pre-filled for any subsequent run.
When the Prepare Design Token Export button is clicked, the plugin will collect every child node of the specified target and then use this collection as the spacing tokens.
(Note that the spacing parent container target reference is stored with
localStorage which does not persist if you logout. So in some cases you may need to reselect the parent container target.)
Spacing token node
The child nodes of the target parent container must be a
instance to be recognized as a valid spacing token. The spacing token name, value and other properties are parsed for each child node as follows:
name– the name of the node (layer name)
value– the width of the node
description– if the node is a component and contains a description, this is stored as the token description and will be rendered as a code comment next to the spacing token
‼ Preserve spacing variable name
Spacing token names can be short —
s3, etc. If this is the case in your design system, when they are automatically transformed for platforms that use kebab case for variable names they can become more cumbersome to work with. Using the three variables in this paragraph, for the CSS platform by default they would be transformed to
If this is undesireable, there is a setting in the plugin that preserves the original token name when exporting to platforms. So in the case above, if the Do not transform spacing token names was checked (enabled), the exported token names for the CSS platform would be: