Importing Figma variables

Import Figma variables as design tokens using our Figma Variables Sync plugin.

The Supernova Figma Variables Sync plugin allows you to synchronize collections of variables and modes with your design system in Supernova. When you push collections from Figma, they will be updated in Supernova, including any tokens referenced in your documentation (once you publish it again) or codebases with automatic hooks.

 

The Supernova Figma Variables Sync plugin is currently in a public beta. If you find any issues, please reach out to us.

Current plugin limitations

  • When imported variables have references from external file collections, the referenced variables need to be imported separately to resolve the reference.
  • Token scopes are not pushed to Supernova.
  • The plugin currently does not support removing previously pushed collections.
  • When pushing updates, changes from all previously pushed collections will be included. Currently, we do not support updates for selected collections only.

Coming soon

  • An option to unsync previously pushed collections.
  • More options for importing Number variables. Right now, we import all number variables as Generic dimension type. We're exploring how to best import radius tokens to Border radius category, etc.

Using Figma variables as a design data source

Import onboarding

Things to note when using Figma variables as design data sources:

  • A design system can import design tokens from both Figma variables (e.g. colors or dimensions) and styles (e.g. typography or shadows).
    If you have tokens created from imported Figma styles and we find a variable with the same name, we will link the design token in Supernova to that variable. All future updates in Supernova will be sourced from the Figma variable.
  • Importing Figma variables cannot be combined with importing styles via Tokens Studio at the moment (learn more about Token Studio as a design data source).

Mapping variables and modes to design tokens

Since Figma's approach to variables and theming (modes) differs from Supernova's design token data model, there are some specific things to be aware of:

  • Each Figma variable is imported as a design token, including its value, description and code syntax.
  • If the variable is nested in groups, we also import these groups.
  • If the value is a reference to a different variable from the same Figma file, we import this referenced variable to Supernova too.
  • We currently map variable types only to main token types. More granular mapping (e.g. to Border radius type) is something we are currently exploring.

Variable type in Figma

Token type in Supernova

Color variable

Color token

Text variable

Generic string token

Number variable

Generic dimension token

Boolean variable

Not imported to Supernova

  • Modes can be imported into Supernova as a base token value or as a theme. By default, the first mode in a collection is mapped to a base token value for each of the tokens; all additional modes are mapped to Supernova themes. You can configure which mode is mapped to base token values (this is required for Supernova’s design token data model) and set up which modes are mapped to Supernova themes.
    Note: Mode configuration is available on the Company and Enterprise plan.
  • Supernova doesn’t have the concept of collections. To retain collection information, we have introduced a new custom property called "Collection." This allows you to view the collection name in the tokens section of Supernova.
Tokens - Mapping

Mapping concepts between Figma and Supernova.

  1. Figma variables are imported as design tokens to Supernova.
  2. Groups from Figma are imported as groups to Supernova.
  3. The value from the first mode is imported as a base token value to Supernova.
  4. All additional modes are imported as themes to Supernova.
  5. A collection name from Figma is imported as a Collection token property to Supernova.

Importing code syntax values from variables

Tokens - Code Syntax

Code syntax (Web, iOS, Android) values from variables are imported to Supernova as custom properties and align what your engineers see in Figma DevMode and design system documentation.

Code syntax can be also used in your custom exporters when setting up code pipelines for exporting your design tokens to code.

Note: If the code syntax value is edited in Supernova, it will get overridden by the value coming from Figma during the next variables update.

Setting up the plugin

New feature - Figma Variables — Welcome
  1. Open the Supernova Figma Variables Sync plugin from Figma’s plugin directory.
  2. Click Sign in to Supernova to a open browser window where you sign in to your Supernova account using your credentials. You can use either email and password or SSO (Single Sign-On).
  3. Once you're signed in, close the confirmation window and return to the plugin.

Congratulations! Now you have everything prepared to start pushing collections to Supernova.

Push collections to Supernova

Selecting a workspace, design system and brand

New feature - Figma Variables — header

In the plugin header, you can choose a workspace, a design system and a brand (if multiple brands are enabled) to push collections to. Once you make this selection, we will show you the list of collections in your current file and their status.

The plugin keeps track of the collections that were pushed to Supernova, ensuring you will always see what is already synchronized.

The first push to Supernova

New feature - Figma Variables

We preselect all collections in the file automatically. If you’d like to push only selected collections to Supernova, you can deselect the collections that you don't want pushed.

You can expand the collection row and configure which mode will be imported as base token values. Also, you can decide which modes you want to import as themes for the selected brand. Note: Mode configuration is available on the Company and Enterprise plan.

When you’re happy with your selection, click the Push to Supernova button. The sync process should only take a few seconds.

To check that everything went right, navigate to the Tokens section of your design system in Supernova. Once you've pushed your tokens, they'll show up there (you might need to refresh the browser to see the changes).

Collection dependencies

There might be a case where variables from selected collections are referencing variables from a different collection. To preserve the cross-collection references, we automatically push any dependent collections to Supernova too.

New feature - Figma Variables — dependency

Example of dependency between multiple collections.

Keep data up to date

When your collections or variables are updated in Figma, they can be pushed to Supernova from the plugin again.

  • In Supernova Figma Variables Sync plugin, click Push changes to Supernova to push updates into Supernova.
  • The tokens will then update in Supernova, and changes will be shown in Design data in the Latest updates column.
New feature - Figma Variables — after sync

The sync cannot be triggered from Supernova, but must be done from the plugin where the variables are managed.