Tokens Studio for Figma
  • Getting Started
    • Tokens Studio Plugin for Figma
    • Install the Figma Plugin
    • Pro Licence for the Figma Plugin
    • Join the Slack Community
    • Feature Requests - Featurebase
    • Changelog - Featurebase
  • Design Token Fundamentals
    • Intro to Design Tokens
      • Token Anatomy - Type
      • Token Anatomy - Value
      • Token Anatomy - Description
      • Token Anatomy - Name
  • Token Management
    • Token Types
      • Asset
      • Boolean
      • Border - Composite
      • Box Shadow - Composite
      • Color
        • Modified Colors (pro)
        • Gradient Colors
      • Dimension
        • Border Radius
        • Border Width
        • Sizing
        • Spacing
      • Number
      • Opacity
      • Other
      • Text (string)
      • Typography - Composite
        • Font Family
        • Font Weight
        • Font Fallbacks
        • Font Size
        • Line Height
        • Letter Spacing
        • Paragraph Indent
        • Paragraph Spacing
        • Text Case
        • Text Decoration
      • Composition (legacy)
    • Token Values
      • Token Values with References
      • Using Math in Token Values
    • Token Names
      • Token Name Technical Specs
      • Token Groups
      • Edit Token Names
    • Token Description
    • Token Sets
      • JSON View
  • Themes management
    • Themes (pro)
    • Themes that switch
  • Working in Figma
    • Variables and Tokens Studio
    • Styles and Tokens Studio
    • Export to Figma Guide
      • Export Options
      • Export Using Themes (pro)
      • Export Using Token Sets
      • Variables Skipped on Export
      • Styles with Variable References
    • Import from Figma Guide
      • Import Styles from Figma
      • Import Variables from Figma
        • Connect Themes to Imported Variables
        • Imported Variable Types and Token Types
    • Non-local Variables and Styles (pro)
    • Remove Tokens from Figma elements
    • Dev Mode in Figma
  • Settings Management
    • Plugin Settings
    • Base Font Size Setting
    • Token Format - W3C DTCG vs Legacy
  • Token Storage and Sync Integrations
    • Local Document - Figma File Token Storage
    • Remote Token Storage Integrations
      • GitHub - Git Sync Provider
      • GitLab - Git Sync Provider
      • Bitbucket - Git Sync Provider
      • Azure DevOps - Git Sync Provider
      • JSONBin - Cloud Sync Provider
      • Supernova - Cloud Sync Provider
      • Tokens Studio Platform - Cloud Sync Provider
      • URL - Server Sync Provider
      • Generic Versioned Storage - Server Sync Provider
    • Multi-file Sync to Remote Storage (pro)
    • Manage Sync Providers
      • Edit Sync Provider
      • Change Active Sync Provider
      • Remove Sync Provider
    • Sync Changes to Remote Storage - Push and Pull
    • Branch Switching (pro) - Version Control
  • Inspect and Debug Tokens
    • Inspect Tokens
    • Remap Tokens
  • Transform Tokens for Development
    • Style Dictionary + SD Transforms
    • Official docs for Style Dictionary
  • Style Dictionary Playground
  • Troubleshooting
    • Reset Tokens from Dev Console
    • Tokens Studio Status
  • Open Source
    • Contribute
    • Shared Plugin Data
Powered by GitBook
On this page
  • Export to Figma Options
  • In the plugin
  • Variable and Style type options
  • Tokens exported to Figma should
  • Up Next - Export as Themes or Token Sets
  • Resources

Was this helpful?

Edit on GitHub
Export as PDF
PreviousExport to Figma GuideNextExport Using Themes (pro)

Last updated 4 months ago

Was this helpful?

Export to Figma Options

The Export to Figma Options menu has important settings for creating or updating Styles and Variables connected to your Tokens.

In the plugin

Select the Styles & Variables Button from the Tokens page and choose Export Styles & Variables.

The Export to Figma Options menu is the first screen in the flow.

You can open the menu at anytime using the Options button at the bottom of the Export to Figma modal.


Variable and Style type options

You select which type of Variables and/or Styles you want to export each time you use this feature.

This granular control allows you export a selection of your Tokens as Variables (for example, brand colors) in one step, then repeat the process to export a different selection of Tokens as styles (for example, brand Typography)

Or perhaps you are working on a new project, and your Color design decisions are ready to export, but your Typography is not.

For the export to be successful, the Variable and Style types you select must be compatible with your Token Types.

1. Variable type options

2. Style type options

You can export different types of Tokens to Variables and Styles at the same time.

colorcan not be exported to Variables and Styles at the same time as the Plugin won't know which property in Figma to attach the Tokens To.


Tokens exported to Figma should

The options under the Tokens exported to Figma should label perform additional functions while creating or updating the Variables and Styles types you've selected.

1. Ignore first part of Token Name for Styles

For Token Names that include groups, the Ignore first part of Token name for Styles option will export the Tokens as Styles with modified names.

This is helpful when your Token Names include prefixes intended for the Design System Team which are not helpful to see in Figma.

For example, a Token named mode-colors.brand.primary.default

With this option enabled will be created as a Style named: brand.primary.default

If your Token Names don't include any groups and you have this option enabled, the Token can't be exported, and you will see an error message from the plugin. "Some Styles were ignored due to Ignore first part of Token name setting"

For example, a Token named mode-colors-brand-primary-default will have the whole name ignored by the plugin, and the Style can't be created without a name.

2. Prefix Styles with active Theme name (pro)

Recall that Tokens must have unique names, and a Token Name is the ID to the decision decision. That unique ID can be attached to a Style or a Variable in Figma.

If you are using Themes (pro), you have multiple Tokens with the same name located in different Token Sets which are grouped into Themes.

Multiple Tokens with the same name cannot be exported to the same Figma file as Styles as they will not have a unique ID,

To solve this problem, this option creates a unique ID in Figma by adding the theme-name before the Token Name.

For example, we may have a Theme Group called color-modes with a few themes called:

  • light

  • dark

  • high-contrast

Each theme has a Token called mode-colors.brand.primary.default but a unique value. We can't export the same Token to Figma more than once.

So, if you want the color Styles for each theme exported to the same Figma file, you can enable the Prefix Styles with the active theme name setting.

In this example, you would need to run the Export to Figma three times, as each export will only prefix the active theme name.

  • Export 1 - Light theme active

    • Return to the themes dropdown, turn this theme off, then repeat with the next theme.

  • Export 2 - Dark theme active

    • Return to the themes dropdown, turn this theme off, then repeat with the next theme.

  • Export 3 - High-contrast theme active

After the three exports, you would see Styles in Figma named (the plugin coverts your grouped named from periods to forward slash):

  • light/mode-colors/brand/primary/default

  • dark/mode-colors/brand/primary/default

  • high-contrast/mode-colors/brand/primary/default

3. Create Styles with Variable references

This setting tells the plugin to connect newly exported Styles with previously created Variables.

This is a multi-step process, detailed in it its own guide.

3. Update existing Style and Variable names

When you update the names of Tokens in the plugin that are currently attached to Styles and Variables in Figma, the Update existing Style and Variable names option ensures Figma will be updated with the new names.

This option moved from the Plugin Settings Page with Version 2.0

5. Remove Styles and Variables without connection to a Token

When you remove Tokens in the plugin that are currently attached to Styles and Variables the Remove Styles and Variables without connection to a Token setting will delete those Styles and Variables from Figma.

This option moved from the Plugin Settings Page with Version 2.0

This option is destructive and can lead to unexpected results!

It should only be used when you are certain you have Variables or Styles that need to be deleted from Figma.


Up Next - Export as Themes or Token Sets

Once you've configured and saved your Export Options, the plugin will bring you to the Export from Themes or Token Sets page.

Select a card below to jump to the next Guide you are interested in.


Resources

Figma resources:

Community resources:

Known issues and bugs

Requests, roadmap and changelog

Color - Creates as Color Variables

String - Creates , and Tokens as String Variables

Number - Creates , , , , , , and Tokens as number Variables

Boolean - Creates as Boolean Variables

Color - Creates as Color Styles

Typography - Creates as Text Styles

Effect - Creates as Effect Styles

Design in Figma -

The Tokens Studio collection of Variable videos -

Our friends at have free learning resources on Variables -

Tokens Studio Plugin GitHub -

Tokens Studio Plugin GitHub -

Tokens Studio Plugin GitHub -

Tokens Studio Plugin GitHub -

Tokens Studio Plugin GitHub -

Tokens Studio Plugin GitHub -

Tokens Studio Plugin GitHub -

Add support for scoping and publishing variables and styles -

Ignore parts of the token name for variables and styles -

Theme Switcher for non-DS designers so I don't need variables anymore -

Tokens applied with Figma UI as Styles or Variables are Fragile -

Create Variable Collections With The Plugin's Order of Themes -

Show updated number of Variables (or styles) when exporting to Figma with updated values -

→ Read the Export to Figma overview for a list of Token Types and their compatible Variable types.
Color Tokens
Text
Font Family
Font Weight
Dimension
Number
Spacing
Sizing
Border Radius
Border Width
Opacity
Boolean Tokens
Color Tokens
Typography Tokens
Box Shadow Tokens
→ Read the guide on Themes for more details
Styles with Variable References
Overview of Variable Collections and Modes
YouTube Playlist
UI Collective
YouTube Playlist
Open issues for Figma export options menu
Open issues for setting ignore first part of name
Open issues for setting prefix theme name
Open issues for update existing name styles variables
Open issues for remove styles and variables without connection
Open issues for Figma Variables
Open issues for Figma Styles
Feature Request
Feature Request
Feature Request
Feature Request
Feature Request (blocked by Figma)
Feature Request
→ Read the guide on Token Names with Groups for more detials.

🐞 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

community Slack
submit it on our feedback tool

💡 Something to share?

💡 Something to share?

Submit it here!
Submit it here!
Page cover image
Select the Export Styles and Variables from the Tokens page to configure the Options.
The Options button at the bottom of the Export to Figma screen is highlighted. Press it anytime to view or edit your Options.
The Export to Figma Options menu is annotated to match the descriptions below.
The Export to Figma Options menu is annotated to match the descriptions below.
Once you've confirmed your Export Options, the Plugin brings you the place where you select which Tokens to export.
Cover

Skipped Variables

Sometimes, the plugin skips exporting your Tokens to Figma even when you have the desired options configured correctly.

Cover

Export as Themes

If you have a Pro licence for Tokens Studio

Cover

Export as Token Sets

If you have a Free licence for Tokens Studio

Cover

Styles with Variable References

Details the steps to use this option with Color, Typography or Box Shadow Tokens.