Manage Variables in Figma with Tokens Studio
If your team is working with Variables in Figma, you can use the Tokens Studio Plugin to attach Design Tokens to Variables (and styles). This allows you to manage your Tokens and Variables in the same place, and easily sync your design decisions to a code repository.
Guides on working with Variables
Select a card below to jump to a comprehensive guide on working with Variables, or scroll down to see the answers to frequently asked questions ↓.
Frequently Asked Questions
Select a question to reveal the answer.
Which Token types match the different Variable types?
Tokens Studio supports 23 unique Token Types and there is only 4 Variable Types. Head to the Export to Figma (overview) guide which shows the relationships.
How do I make sure my Variables are hidden from publishing and scoped properly using Tokens Studio?
Tokens Studio is not yet able to control Figma's Scoping or Hide from Publishing features.
You can use the Figma native UI to adjust the desired Scoping and Publishing feature without adverse effects to the attached Tokens.
Why isn't Theme switching in the Plugin working?
Once you Export to Figma as Variables using Themes, you will be required to use Figma's native Mode Switching feature.
The Theme Switcher in the Plugin will not work once those themes are attached to a Variable Collection
Manage Variables using Tokens Studio
Why didn't the Plugin create Variable Collections with Modes? I have duplicate Collections I wasn't expecting.
You need to export to Figma from Themes (pro) in order for the Plugin to be able to create a single collection with multiple modes.
Head to the guide on Exporting to Figma from Themes for more details.
My Variable Collection names aren't what I expected, how do I fix this?
When Exporting to Figma to create Variables, the Collection Name is created from the Theme Group when exporting from themes, and the Token Set name when exporting from Token Sets. Head to the guide on Exporting to Figma for more details.
When creating Variables from Tokens using the Plugin, why are there less Variables then I have Tokens?
There are many reasons why the Plugin may have to skip creating a Variable. Head to the guides for Skipped Variables when Exporting to Figma for more details.
Create Design Tokens in the Plugin from Variables
After importing my variables into the Plugin, I'm confused at how things are organized in Tokens Studio.
Congrats on getting this far! Head to the comprehensive guide on Importing Variables for some handy visuals and pro-tips.
Last updated
Was this helpful?