Last updated
Was this helpful?
Last updated
Was this helpful?
If you were hoping to import your Variables and use Tokens Studio as your source of truth for maintaining your design decisions, our Themes feature (pro) makes this possible.
The Themes feature has a concept of Groups of Themes, which allows the plugin to connect to a Variable collection with multiple modes.
If you have a Pro Licence for Tokens Studio, here are the steps to attach the Imported Variables to Themes, allowing you to use the plugin to update your Variables.
The image below shows how Theme Groups and Themes map to Figma's Variable collections and modes.
Once you Import your Variables Into Tokens Studio, you've taken a "snapshot" of the Variables and their values as Tokens in the Plugin. You need to establish a relationship between the Tokens and the Variables, and Themes are how the Plugin is able to attach the Tokens to Variables across multiple modes and collections.
This is the same example used in the Import Variables Guide.
After the Import is complete, in the Plugin you will see:
Each Variable collection becomes a folder of Token Sets, with the folder name matching the collection name.
Each Mode within the Variable Collection becomes an individual Token Set, with the Set name matching the Mode name, nested within the folder name matching the collection name.
Each Variable is created as a Design Token with the same name and value.
To attach the Design Tokens in the Plugin to the Variables in Figma, you'll:
Create Theme Groups and Themes with names that match the Variable Collections and Modes.
Attach the Themes with Variables using the Export to Figma feature.
Check the connection between your Themes and Variables.
When the Plugin completed the import, each Token Set name contains the collection/mode, so you will use this to create the theme-group/theme names to match.
The easiest way to do this so there is an exact match is to copy the Token Set name.
Right-click on the Token Set Name (left side navigation panel on the Tokens page).
Select Rename.
The Rename Token Set modal appears with the current name inside the text input.
Select the current name from the input and copy it using a keyboard shortcut.
command + C on a Mac
control + C on a PC
Paste the name in a text editor of your choice.
For example brands/apple is the full set name in the image below.
From the Tokens Page of the Plugin, open the Themes dropdown (it doesn't matter what Token Set is showing on the page):
Select Manage Themes
Select New Theme
From the Themes manager, select the New Theme button.
Once the Create Themes form is open:
Select + add group from the top left.
Paste in the part of the Token Set name that appears before the /
For example brands
Select the Theme name input and paste the part of the Token Set name that appears after the /.
For example apple
Under the inputs is a complete list of all Token Sets.
Ensure only Token Set with the name matching the Theme you are creating has the Status of Enabled (checkmark icon button is highlighted).
Ensure all other Token Sets have a Status of Disabled (X icon button is highlighted).
Select Save Theme to finish.
You'll return to the Themes Manager where your new Theme is now listed.
Now you can repeat this process for the rest of the Token Sets created from your Imported Variables.
In this example, 3 Variable collections were imported with a total of 7 Token Sets.
brand Variable collection has 3 more Token Sets to add.
primitive Variable collection to be created as a Theme Group with 2 Token Sets.
theme Variable collection to be created as a Theme Group with 2 Token Sets.
The good news is, if you are creating an additional Theme inside an existing Theme Group, you can select the Theme Group from the form instead of typing it each time.
In this example, the brands Theme Group created previously appears in the dropdown while adding the new Theme called berry.
When all Token Sets have been added into Theme Groups, you are ready to create the connection to the Variables.
In this example, the Themes Manager shows 3 Theme Groups with names that match the imported Variable Collections and Modes.
You'll use the Export to Figma feature to attach your newly created Themes to your Variables in Figma. Once the connection is made, you can use The Plugin to manage your Variables.
This is a quick overview of the steps using this example.
Select the Styles & Variables Button from the Tokens page.
Choose the Export Styles & Variables option.
The Export Options menu will open, ensure you have:
All Variable types selected
None of the Style types selected
None of the toggles selected under the Tokens Exported to Figma should option.
Select confirm to close the Options menu.
You should be looking at the full list of Theme Groups and Themes in your Token Structure.
Select all Themes within the Theme Groups you just created (checkmark is visible).
Select Export to Figma to complete the action.
Your Variable collections should now be connected to Tokens Studio!
If you navigate back to the Themes manager, you'll see a count of attached Variables for each Theme.
You can test this by making a change to to a Token from the plugin, and running the Export to Figma action again, you should see the matching Variable change in the Figma UI.
If you have unexpected results, here are some additional guides that might be helpful in troubleshooting:
→
Manage themesto view the Themes Manager. The example on the right shows the Themes Manager before any Themes are created. 
