Export to Figma Options
The Export to Figma Options menu has important settings for creating or updating Styles and Variables connected to your Tokens.
In the plugin
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.


Variable and Style type options
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.

1. Variable type options
Color - Creates Color Tokens as Color Variables
String - Creates Text, Font Family and Font Weight Tokens as String Variables
Number - Creates Dimension, Number, Spacing, Sizing, Border Radius, Border Width, and Opacity Tokens as number Variables
Boolean - Creates Boolean Tokens as Boolean Variables
2. Style type options
Color - Creates Color Tokens as Color Styles
Typography - Creates Typography Tokens as Text Styles
Effect - Creates Box Shadow Tokens as Effect Styles
Tokens exported to Figma should
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.

1. Ignore first part of Token Name for Styles
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.
→ Read the guide on Token Names with Groups for more detials.
2. Prefix Styles with active Theme name (pro)
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
activeReturn to the themes dropdown, turn this theme off, then repeat with the next theme.
Export 2 -
Dark theme
activeReturn 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
→ Read the guide on Themes for more details
3. Create Styles with Variable references
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.
Styles with Variable References3. Update existing Style and Variable names
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
5. Remove Styles and Variables without connection to a Token
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.
Up Next - Export as Themes or Token Sets
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.

Export as Themes
If you have a Pro licence for Tokens Studio

Export as Token Sets
If you have a Free licence for Tokens Studio

Skipped Variables
Sometimes, the plugin skips exporting your Tokens to Figma even when you have the desired options configured correctly.

Styles with Variable References
Details the steps to use this option with Color, Typography or Box Shadow Tokens.
Resources
Figma resources:
Design in Figma - Overview of Variable Collections and Modes
Community resources:
The Tokens Studio collection of Variable videos - YouTube Playlist
Our friends at UI Collective have free learning resources on Variables - YouTube Playlist
💡 Something to share? Submit it here!
Known issues and bugs
Tokens Studio Plugin GitHub - Open issues for Figma export options menu
Tokens Studio Plugin GitHub - Open issues for setting ignore first part of name
Tokens Studio Plugin GitHub - Open issues for setting prefix theme name
Tokens Studio Plugin GitHub - Open issues for update existing name styles variables
Tokens Studio Plugin GitHub - Open issues for remove styles and variables without connection
Tokens Studio Plugin GitHub - Open issues for Figma Variables
Tokens Studio Plugin GitHub - Open issues for Figma Styles
🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our community Slack, submit it on our feedback tool, or send us an email support@tokens.studio
Requests, roadmap and changelog
Add support for scoping and publishing variables and styles - Feature Request
Ignore parts of the token name for variables and styles - Feature Request
Theme Switcher for non-DS designers so I don't need variables anymore - Feature Request
Tokens applied with Figma UI as Styles or Variables are Fragile - Feature Request
Create Variable Collections With The Plugin's Order of Themes - Feature Request (blocked by Figma)
Show updated number of Variables (or styles) when exporting to Figma with updated values - Feature Request
💡 Something to share? Submit it here!
Last updated
Was this helpful?