Help Center

Documenting Figma color variables

Lewis Smith-Tong

The zeroheight – variables sync plugin enables you to create and update design tokens in zeroheight from color 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

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

Create zeroheight tokens from Figma variables

You create tokens in zeroheight from Figma color variables using the zeroheight – variables sync plugin. Run the plugin in the Figma file that contains your color 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 either 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.

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 Push to zeroheight will create a new token set in zeroheight for each color 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.

Document Figma variables

As with any token in zeroheight, tokens created from Figma variables can be referenced in documentation by mentioning a token inline or in a tokens table. General information on documenting tokens here.

Since zeroheight supports Figma variable collections and modes, there are some small differences when documenting tokens created from Figma variables.

Modes and collections with inline mentions

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

When you mention a token inline, you are only able to reference the default mode of the token.

Modes and collections with the Design tokens block

You 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.

FAQ

Can I sync variables other than color?

No. The zeroheight - variables sync only supports syncing color variables. If you have a need for exporting the tokens – let us know!

If you have other variable types that you would like to sync to zeroheight you can use a 3rd party plugin like the Design Tokens Manager plugin to export your variables to JSON and then import the JSON file into zeroheight to create tokens. More on importing info to our Token Manager from JSON here.

If you have variables that reference variables in different collections, you will need to combine the exported JSON files into a single file before importing to zeroheight.

If a component utilises variables, is information about the variables available with the inspect tool?

No. If you require the zeroheight inspect tool to show the names of the colors being used by a component, you will need to continue to apply color styles to components in Figma. If you require the inspect tool to show links to other zeroheight pages where those colors are documented you should also continue to document your color styles via design uploads.

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

These variables will be sync’d to zeroheight but the reference to the variable in a separate file is lost. The variable’s value is resolved to the hex value of the aliased variable.

Does everyone in my team need to request Beta access?

No. Once an organization is enrolled in the beta, any Editor or Admin can create tokens in zeroheight from Figma variables.

Why can’t I find the tokens I created from Figma variables when attempting to reference them in my styleguide?

This is likely because you are attempting to reference your tokens in a page that is not using the new zeroheight editor.

It’s only possible to document tokens created via the zeroheight - variables sync using the new zeroheight editor. Organizations enrolled in the Figma variables closed beta are enrolled in the beta for the new zeroheight editor and you’ll need to create a new page in your styleguide (that will be created using the new zeroheight editor) to add your tokens created from Figma variables.

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!

Can I export the tokens I create from Figma variables?

No. Tokens created from Figma variables can only be added to documentation. If you have a need for exporting the tokens – 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 sync’d for the first time – a new token set will be created.

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

The original file will continue to be sync’d 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.