| icon | arrow-right-from-line |
|---|---|
| cover | ../../.gitbook/assets/page-header-figma-export-overview.png |
| coverY | 0 |
As of the plugin's V2 launch, we are happy to support 21 unique Token Types that can be exported to Figma as Styles or Variables.
The Export feature creates and updates Styles or Variables attached to the Tokens with the same name in the plugin. This allows Tokens Studio to be the single place to manage design Tokens, Styles, and Variables in Figma.
Each time you Export to Figma, you choose:
- The type of Style or Variables to export.
- Which Themes or Token Sets are included in the export.
You may select the name of the Token Type below to learn more about that token type or keep reading to learn more about Exporting to Figma.
| Token Type | Variable Type | Style Type | Notes |
|---|---|---|---|
| Boolean | Boolean | none | Controls layer visibility, not component properties. |
| Text | String | none | Replaces placeholder text when applied to text layers. |
| Color | Color | Color | Variables referenced in the style value is possible. |
| Color - Gradient | none | Color | Variables referenced in the style value is possible. |
| Color - Modified (pro) | Color | Color | Modified colors won't show their references in variables. |
| Opacity | Number | none | Controls layer visibility applied as a number variable. |
| Dimension | Number | none | Converted to a unitless number. Rem units are converted to pixel equivalent. |
| Number | Number | none | If units are added to the token there are unexpected results (known issue). |
| Spacing | Number | none | If units are added to the token, the unit will be dropped. |
| Sizing | Number | none | If units are added to the token, the unit will be dropped. |
| Border Width | Number | none | If units are added to the token, the unit will be dropped. |
| Border Radius | Number | none | If units are added to the token, the unit will be dropped. |
| Border (composite) | none | none | Variables referenced in the token value will appear for color and border-width properties. |
| Box Shadow (composite) | none | effect | Variables referenced in the token value will appear for color and dimension properties. |
| Typography (composite) | none | text | Variables referenced in the token value will appear in the text style for available properties. The 'particle' Tokens will be exported as variables according to their token type. |
| Font Family | String | none | Exported as a part of the Text style created by the Typography Token (composite). |
| Font Weight | String / Number | none | Exported as a part of the Text style created by the Typography Token (composite). |
| Font Size | Number | none | Exported as a part of the Text style created by the Typography Token (composite). |
| Line Height | Number | none | Exported as a part of the Text style created by the Typography Token (composite). |
| Letter Spacing | Number | none | Exported as a part of the Text style created by the Typography Token (composite). |
| Paragraph Spacing | Number | none | Exported as a part of the Text style created by the Typography Token (composite). |
| Text Case | none | none | Exported as a part of the Text style created by the Typography Token (composite). |
| Text Decoration | none | none | Exported as a part of the Text style created by the Typography Token (composite). |
Once you have created your Tokens in the plugin, select the Styles & Variables Button from the Tokens page to open the menu.
- Select Export styles & variables.
- Review the Export to Figma Options and select your configuration based on your desired task.
- Choose to Export as Themes or Token Sets
- Select which Theme or Sets to export
- Confirm and complete the export.
Select the Export Styles and Variables from the Tokens page to configure the Options.
The Export to Figma Options menu is annotated to match the descriptions below.
The Export to Figma options allow you to make some key configurations:
- Export your Tokens as Variables, Styles or both.
- Define which types of variables you want to export.
- Choose any Style specific settings.
- Style name modifications.
- Style values with variable references.
- Choose any update-specific settings.
- Token name changes.
- Remove styles and variables no longer connected to a token.
→ Read the Export to Figma Options guide for details and troubleshooting tips
Depending on your Tokens Studio licence and your Token Structure, you can choose to export to Figma connected to Themes or Token Sets.
Once you've confirmed your Export Options, the Plugin brings you the place where you select which Tokens to export.
Themes (pro)
- Exports your selected Themes to Variables with multiple modes within a collection.
- Maintains a connection with exported Styles and Variables for seamless updates.
- Across multiple Figma files if desired.
- Requires a pro licence for Tokens Studio
→ Read the Export to Figma from Themes guide for detailed instructions.
Token Sets
- Exports your selected Token Set to Variables as a separate collections
- Multiple modes are not supported.
- Tokens aren't always connected to the Styles and Variables created from Token Sets.
- When you update your Tokens, you may have to replace existing Styles and Variables.
→ Read the Export to Figma from Token Sets guide for detailed instructions.
Once you've confirmed your selection, the Styles or Variables you selected will be Exported to Figma.
There are some exceptions where the plugin has to 'skip' exporting some of your Tokens to variables.
→ Read the Skipped Variables guide for more details.
The plugin supports Styles with Variable references. This allows you to create Color, Text, and Effect Styles with values connected to Variables, all powered by your Design Tokens.
This workflow requires a few steps to get started.
→ Read the Styles with Variable References guide for detailed instructions.
Figma resources:
- Design in Figma - Overview of Variable Collections and Modes
- The Tokens Studio collection of Variable videos - YouTube Playlist
- Our friends at UI Collective have free learning resources on Variables - YouTube Playlist
{% include "../../.gitbook/includes/something-to-share-subm....md" %}
- Tokens Studio Plugin GitHub - [Open issues for Figma export](Tokens Studio Plugin GitHub - Open issues for Figma export)
{% include "../../.gitbook/includes/bug-report.md" %}
- 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
{% include "../../.gitbook/includes/featurebase.md" %}