Last updated
Was this helpful?
Last updated
Was this helpful?
The Export to Figma Options menu has important settings for creating or updating Styles and Variables connected to your Tokens.
Select the Styles & Variables Button from the Tokens page and choose Export Styles & Variables.
The Export to Figma Options menu is the first screen in the flow.
You select which type of Variables and/or Styles you want to export each time you use this feature.
This granular control allows you export a selection of your Tokens as Variables (for example, brand colors) in one step, then repeat the process to export a different selection of Tokens as styles (for example, brand Typography)
Or perhaps you are working on a new project, and your Color design decisions are ready to export, but your Typography is not.
The options under the Tokens exported to Figma should
label perform additional functions while creating or updating the Variables and Styles types you've selected.
For Token Names that include groups, the Ignore first part of Token name for Styles
option will export the Tokens as Styles with modified names.
This is helpful when your Token Names include prefixes intended for the Design System Team which are not helpful to see in Figma.
For example, a Token named mode-colors.brand.primary.default
With this option enabled will be created as a Style named: brand.primary.default
If your Token Names don't include any groups and you have this option enabled, the Token can't be exported, and you will see an error message from the plugin. "Some Styles were ignored due to Ignore first part of Token name setting"
For example, a Token named mode-colors-brand-primary-default
will have the whole name ignored by the plugin, and the Style can't be created without a name.
Recall that Tokens must have unique names, and a Token Name is the ID to the decision decision. That unique ID can be attached to a Style or a Variable in Figma.
If you are using Themes (pro), you have multiple Tokens with the same name located in different Token Sets which are grouped into Themes.
Multiple Tokens with the same name cannot be exported to the same Figma file as Styles as they will not have a unique ID,
To solve this problem, this option creates a unique ID in Figma by adding the theme-name before the Token Name.
For example, we may have a Theme Group called color-modes
with a few themes called:
light
dark
high-contrast
Each theme has a Token called mode-colors.brand.primary.default
but a unique value. We can't export the same Token to Figma more than once.
So, if you want the color Styles for each theme exported to the same Figma file, you can enable the Prefix Styles with the active theme name
setting.
In this example, you would need to run the Export to Figma three times, as each export will only prefix the active theme name.
Export 1 - Light theme
active
Return to the themes dropdown, turn this theme off, then repeat with the next theme.
Export 2 - Dark theme
active
Return to the themes dropdown, turn this theme off, then repeat with the next theme.
Export 3 - High-contrast theme
active
After the three exports, you would see Styles in Figma named (the plugin coverts your grouped named from periods to forward slash):
light/mode-colors/brand/primary/default
dark/mode-colors/brand/primary/default
high-contrast/mode-colors/brand/primary/default
This setting tells the plugin to connect newly exported Styles with previously created Variables.
This is a multi-step process, detailed in it its own guide.
When you update the names of Tokens in the plugin that are currently attached to Styles and Variables in Figma, the Update existing Style and Variable names
option ensures Figma will be updated with the new names.
This option moved from the Plugin Settings Page with Version 2.0
When you remove Tokens in the plugin that are currently attached to Styles and Variables the Remove Styles and Variables without connection to a Token
setting will delete those Styles and Variables from Figma.
This option moved from the Plugin Settings Page with Version 2.0
This option is destructive and can lead to unexpected results!
It should only be used when you are certain you have Variables or Styles that need to be deleted from Figma.
Once you've configured and saved your Export Options, the plugin will bring you to the Export from Themes or Token Sets page.
Select a card below to jump to the next Guide you are interested in.
Figma resources:
Color - Creates as Color Variables
String - Creates , and Tokens as String Variables
Number - Creates , , , , , , and Tokens as number Variables
Boolean - Creates as Boolean Variables
Color - Creates as Color Styles
Typography - Creates as Text Styles
Effect - Creates as Effect Styles
Design in Figma -
The Tokens Studio collection of Variable videos -
Our friends at have free learning resources on Variables -
Tokens Studio Plugin GitHub -
Tokens Studio Plugin GitHub -
Tokens Studio Plugin GitHub -
Tokens Studio Plugin GitHub -
Tokens Studio Plugin GitHub -
Tokens Studio Plugin GitHub -
Tokens Studio Plugin GitHub -
Add support for scoping and publishing variables and styles -
Ignore parts of the token name for variables and styles -
Theme Switcher for non-DS designers so I don't need variables anymore -
Tokens applied with Figma UI as Styles or Variables are Fragile -
Create Variable Collections With The Plugin's Order of Themes -
Show updated number of Variables (or styles) when exporting to Figma with updated values -
🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our , , or send us an email support@tokens.studio
💡 Something to share?
💡 Something to share?
Skipped Variables
Sometimes, the plugin skips exporting your Tokens to Figma even when you have the desired options configured correctly.