Oombla DocsMenuoombla.com

Spacing

Spacing design tokens

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.

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 frame, component, or 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.

screenshot of plugin user interface showing parent target container selected

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 frame, rectangle, component, or 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

screenshot of plugin user interface showing the child nodes of a parent container with one of the nodes selected showing the node’s properties

‼ Preserve spacing variable name

Spacing token names can be short — s1, s2, 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 --s-1, --s-2, and --s-3.

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: --s1, --s2, and --s3.