The zeroheight plugin for Figma enables you to create and update design tokens, and sync designs from Figma to zeroheight.

Once you’ve created design tokens in zeroheight from your variables, you’ll be able to:

• display them in your styleguide in a table
• @ mention your tokens throughout documentation
• view linked color tokens in the component inspect view
• export them to your development pipelines

Create zeroheight tokens from Figma variables

More information on documenting design tokens in zeroheight is available here and information on exporting design tokens created in zeroheight is available here.

You create tokens in zeroheight from Figma variables using the zeroheight plugin for Figma. Run the plugin in the Figma file that contains your variables to get started.

Sign in

The first time you run the plugin (and whenever your session expires) you need to sign in to your zeroheight account.

You can sign in using your zeroheight username and password or via SSO.

If you choose to sign in with SSO, you’ll need to copy/paste a token into the plugin that you can retrieve from zeroheight.com/plugin/auth when signed in to zeroheight via your browser.

Sync variables with zeroheight

Once you've signed into the plugin, select 'variables' and you'll see the variable collections in the current file listed in the plugin

Select the token set you want to sync your variables to. You can choose one of the existing token sets on zeroheight, or scroll to the bottom of the dropdown and select ‘New token set’. Multiple Figma files can be synced to the same token set on zeroheight.

Subsequent syncs with zeroheight from the same file will publish an update to the token set. If your tokens have been added to documentation, these references will be updated in the latest release of your styleguide each time you push an update from Figma to zeroheight via the plugin.

While changes to the value of variable in Figma will be synced to zeroheight, updates to the name or path of a variable will not.

• Changing the name or path of a variable breaks the link between the variable in Figma and the token in zeroheight
• The original token is removed from the token set in zeroheight
• Instances of the original token that were added to documentation via the inline mention display as normal to editors but display as token not found to viewers
• Instances of the original token that were added to documentation via design tokens block display a warning to viewers and are removed from the table for viewers
• The updated variable is created as a new token in the token set

Referencing values from external files

The plugin will warn you if the variables in your file include external references to variables in a separate Figma file. In order to display aliases for these variables, you need to sync the referenced file’s variables to zeroheight first. Then, go to sync the variables of the referencing file, and select the same token set in the plugin. You’ll see the message ‘External references matched’.

Document Figma variables

As with any token in zeroheight, tokens created from Figma variables can be referenced in documentation by mentioning them inline or in a tokens table. General information on documenting tokens here. But since zeroheight supports Figma variable collections and modes, there are some small differences when documenting tokens created from Figma variables compared with documenting tokens created via other means.

Modes and collections with inline mentions

When mentioning a token inline, tokens are organized into collections:

When you mention a token inline, the token is added with the value for the default mode. If you wish to change the mode you are able to do so. (Note: only editors can change the mode of an inline mentioned token, viewers see the token with the selected mode).

Modes and collections with the Design tokens block

Editors are able to add tokens to a page in your styleguide in a table format via the Design tokens block. When choosing which tokens to add, you are able to view the tokens for each collection via the side bar. The token for the default mode will be shown.

You can navigate between token sets and collections, then select the tokens you want to add and click the Add button.

Once you’ve added tokens to the block, you can add columns to display different modes. Hover over the column header to access the menu icon. From here you can add up to three columns, rename them, and click ‘Manage modes’ to choose the mode(s) to display for the selected tokens. For tokens in extended collections, you’ll also be able to select which of the extended collections to display the tokens from.

Viewing linked color tokens in the component inspect view

When inspecting components that are utilising Figma color variables (and the color variables have been synced with zeroheight) users will see the name of the variable/token(s) in both Edit and View modes.

Where the Token has also been documented in the styleguide, viewers/editors will also be able to click through to that page via the View in styleguide link.

It's possible (although unlikely) that the tokens listed in the Linked Tokens section are either incorrect or show the wrong mode. Editors can click the Edit button on the Is there something wrong? banner to fix errors with the listed tokens by

• hiding tokens from the inspect view
• selecting the correct mode of the token in the inspect view

Exporting the tokens

Tokens in zeroheight created from Figma variables can be exported to DTCG compliant JSON or Style Dictionary from the Token Manager.

When first exporting, you’ll need to configure your export preferences, by deciding which collections and, if relevant, which modes you’d like to export. You can update this configuration per token set by selecting ‘Update export configuration’ in the Export menu of the token set.

The export will include one file per combination of selected modes across the selected collections in your token set. For example, if your token set looks like this:

Assuming you choose to export all collections and modes, the output will contain 4 files covering each combination: light_mobile, light_desktop, dark_mobile, and dark_desktop. If multiple modes have the same name across collections, they will be treated as one mode and will not create extra export files.

For the JSON download - the export will be in the form of a .zip file. Once unzipped, you’ll see the individual files.

For the Style Dictionary export - zeroheight will provide a URL that returns a list of URLs (one for each combination as described above). Only the Style Dictionary format is supported.

zeroheight has provided an example script here for working with the Style Dictionary export for token sets create from Figma variables.

More information on exporting tokens here.

FAQ

What happens if my sync includes variables that are aliases of variables in a separate file?

If you sync the referenced file to zeroheight first, and then sync the referencing file to the same token set, the alias will be shown on zeroheight. If you want to achieve this for a file that’s already been loaded to zeroheight, sync the referenced file to the same token set and then re-sync the referencing file.

If the referenced file is not synced to zeroheight, these aliasing variables will still be synced to zeroheight, but the reference to the variable in a separate file is lost. The variable's value is resolved to the value of the aliased variable. If the the aliased variable belongs to a collection that's using Modes - the value is resolved for the first mode.

Are extended collections supported?

Yes! Extended collections will sync the same as regular collections. In zeroheight they will appear as their own collections and can be added to styleguides and exported from zeroheight in the same way as regular collections.

Can I edit the tokens I create from Figma variables in zeroheight?

No. The sync between zeroheight and Figma for variables is "one way". If you have a need for editing the tokens in zeroheight — let us know!

What happens if I attempt to sync an update to my variables from Figma, but the token set has been deleted?

In this scenario the plugin will behave as though the Figma file was being synced for the first time - a new token set will be created.

Will the names of non-color variables be shown in the inspect view?

No, only color variables are shown. If you'd like to see the name of other variable types - let us know!

What happens if I sync variables with zeroheight and then copy the file in Figma?

The original file will continue to be synced with the token set in zeroheight. If you want to sync the copied file with a new token set, get in touch with support@zeroheight.com. If you attempt to sync the copied file, the token set associated with the original file will be updated.

Can I sync my designs to zeroheight?

Yes you can! You can sync your designs from Figma using the zeroheight plugin for Figma. You can sync entire design or individual pages to zeroheight to document your design system.