Using Figma variables as a design data source
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 scopes 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.
- If variable is in extended collections, it is treated as one variable which is resolved with collection-specific theme.
- A variable defined across parent and child collections shows as a single token. Its displayed value changes based on the selected collection-specific theme.
- If variable has a unique scope selected in Figma, it will be assigned to the corresponding token type in Supernova.
- If variable has more than one scope selected in Figma, it will be treated as a generic (string or dimension) token in Supernova.
Mapping concepts between scope in Figma and token type in Supernova:
|
Variable type in Figma |
Unique scope in Figma |
Token type in Supernova |
|---|---|---|
|
Color variable |
- |
Color token |
|
String variable |
- |
Generic string token |
|
|
Text content |
Generic string token |
|
|
Font family |
Font family |
|
|
Font weight or style |
Font weight |
|
Number variable |
- |
Generic dimension token |
|
|
Corner radius |
Border radius |
|
|
Width and height |
Size |
|
|
Gap |
Spacing |
|
|
Text content |
Generic string |
|
|
Stroke |
Border width |
|
|
Layer opacity |
Opacity |
|
|
Effects |
Generic dimension |
|
|
Font weight |
Generic dimension |
|
|
Font size |
Font size |
|
|
Line height |
Line height |
|
|
Letter spacing |
Letter spacing |
|
|
Paragraph spacing |
Paragraph spacing |
|
|
Paragraph indent |
Generic dimension |
|
Boolean variable |
- |
Not imported to Supernova |
Mapping modes to themes
- 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.
- 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.
Mapping concepts between Figma and Supernova.
- A collection name from Figma is imported as a Collection token property to Supernova.
- For extended collections, each mode becomes a collection-specific theme: “[Mode] • [Collection Name]”.
- Groups from Figma are imported as groups to Supernova.
- Figma variables are imported as design tokens to Supernova.
- The value from the first mode is imported as a base token value to Supernova if there are no other modes in collection, or if the Mode configuration is set that way.
- All additional modes are imported as themes to Supernova.
Importing code syntax values from variables
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.