Last updated
Was this helpful?
Last updated
Was this helpful?
You can import all your Styles from Figma into Tokens Studio with just a few clicks.
The Import Styles feature creates a Design Token for each Style in a Token Set of your choice.
This guide will walk you through how to get your Color, Text and Effects Styles into Tokens Studio.
Then, you can decide whether to use the Plugin to control your Styles, export them to code in properly formatted JSON files as Design Tokens or move your Styles to another Figma file.
In the Figma file where your Styles live, open the Tokens Studio Plugin.
If you don't already have Tokens in this file, select the New empty file option when the plugin loads.
Select the Token Set where you'd like the Tokens created from your Styles to live.
In the example below, we have selected the global Token Set.
Select the Styles & Variables Button from the Tokens page to reveal the Import and Export to Figma menu.
If you have multiple Token Sets in the Plugin, be sure you have selected the Token Set where you'd like the Imported Styles to be created as Tokens.
The selected set has a darkened accent color around the Token Set name.
The status of the checkbox next to the Token Set does not matter.
From the Styles and Variables menu
Choose the Import Styles action.
The Import Styles Modal appears with three options.
The Import Styles Modal appears with three options which tell the plugin which type of style to import. You can select as many options as you like:
When you import Color Styles, the Plugin will create a new Token with the Token Type of color for these values:
Single-value colors with full or reduced opacity.
Gradient colors.
The plugin is not able to import Color Styles with these values:
Images.
Multiple fill colors.
When you import Text Styles, the Plugin takes a couple of extra steps to help define all the design decisions that are combined to create a Typography Token.
First, it creates an individual Token for each Text property within the Style and assigns the appropriate Token Type.
Font Family
Font Weight
Font Size
Line Height
Letter Spacing
Paragraph Spacing
Paragraph Indent
Text Decoration
Text Case
Then, a new Typography composite Token is created with a name that matches the Text Style Name. The value of the Token will reference the individual text property Tokens.
When you import Effect Styles, the plugin will create a new boxShadow Token for each Style. If your styles are composed of multiple shadow layers, the Plugin will create the Shadow Tokens to match.
Once you've confirmed your Import Styles options, select the Import button at the bottom of the modal.
The plugin will display a list of Style names and values to import.
Review the "diff" list and confirm the import.
Style names in the section called New Tokens are not connected to a Token in your file, and a new Token will be created with the same name.
The Style names in the section called Existing Tokens are already connected to Tokens in your file, and the plugin has detected a change in their value. The import action will update the existing Tokens.
Green items are new or being added.
Red (right side) items are being removed.
There are a few ways to select what to Import from this list.
Select the Import all button at the bottom of the modal to import all Styles in the list, this would create all new Tokens and update all exisiting Tokens in the list.
Select the Create all button on the right side of the New Tokens section to create new Tokens in that section of this list, and ignore the Styles in the Existing Tokens list.
Select the Update all button on the right side of the Existing Tokens section to update the Tokens attached to the Styles in that section of this list without creating any new Tokens.
Select the plus icon button on the right side of any Style name to create a single Token.
Select the trash can icon button on the right side of any Style name to remove it from this list, or exclude it from the import process.
Once you confirm which Styles to Import, the Tokens will be created in the active Token Set, with names that match the attached Styles.
Once your Styles have been imported, there is a connection between the Style and the Token in the plugin that shares the same name. In our docs, we use the term "attached" to describe this relationship.
There are a couple of ways to keep the values of your Tokens and Styles up to date, depending on how you like to work and if you are a Pro Licence holder for the Plugin.
If you prefer to work in Figma natively, you can repeat the Import Styles process anytime. This will update the values of attached Tokens in the plugin as long as the name of your Styles or Design Tokens has not changed.
If you make changes to Tokens in the Plugin that are attached to Styles in Figma, you can use the Export to Figma features to update the connected styles.
We know there is lots of room for improvement with the Import Styles feature, and we are working on it!
Today, if you import your Variables first and then your Styles second, the Plugin can't read those connections and complete the references for you yet.
The only way to complete this task today is to manually change the Values of the Tokens created when you imported your Styles to reference a Token that is attached to your Variables.
Figma resources:
None yet!
Tokens Studio Plugin GitHub - Open issues for Token Type Border
None yet
None
Color Styles - creates .
Text Styles - creates and optional Text Property Tokens.
Shadows - creates from Effects Styles.
Design in Figma -
headline.100.light which was created by importing a text style from Figma with the same name. On the left, the Token name is being hovered on in the Tokens Studio Plugin, which shows all of its properties. 
💡 Something to share?
🐞 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
💌 Visit to contribute or subscribe to updates.
