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 ↓.

Export to Figma Create Variables from Tokens using the Plugin.

Skipped Variables Troubleshooting tips when creating new variables.

Non-Local Variables (pro) Split variable collections across many Figma files.

Import from Figma Create Tokens from Variables

Styles with Variable References

---

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.

Supported Token Types

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.

Export Using Themes (pro)

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.

Export to Figma Guide

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.

Variables Skipped on Export

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.

Import Variables from Figma