The zeroheight - variables sync plugin enables you to create and update design tokens in zeroheight from variables in Figma.

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

• display them in your styleguide in a table and JSON format
• @ 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 - variables sync plugin. 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, you'll see the variable collections in the current file listed in the plugin

Clicking Create token set will create a new token set in zeroheight that contains a token for each variable in the file.

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

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 organised 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. You are also able to switch between modes via the drop down menu.

The drop down for selecting mode will show the available modes for the selected collection and/or the available modes of any token that is aliased by a token in the current selection.

You can navigate between token sets, collections and modes - then select the tokens you want to add. As you select tokens you'll see a counter track the number of tokens you are adding on the Add button.

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 W3C compliant JSON or Style Dictionary from the Token Manager.

For the JSON download - the export will be in the form of a .zip file. Once unzipped, you’ll see a file for each combination of Collection and Mode.

For the Style Dictionary export - zeroheight will provide a URL that returns a list of URLs (one for each combination of Collection and Mode in the token set). Each of these URLs then returns the name and value of each token in the Collection/Mode. 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 a variables in a separate file?

These variables will 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.

Can I mention Figma variables in the theme editor?

No. This is currently not supported and is something we will be looking to support in the future.

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.