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
      • Figma Data Limits
    • 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 guide
  • Supported Token Types
  • How it works
  • Export to Figma options
  • Choose to export from Themes or Token Sets
  • Skipped Tokens
  • Styles with Variable references
  • Resources

Was this helpful?

Edit on GitHub
Export as PDF

Export to Figma guide

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.

Supported Token Types

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

none

Controls layer visibility, not component properties.

String

none

Replaces placeholder text when applied to text layers.

Color

Color

Variables referenced in the style value is possible.

none

Color

Variables referenced in the style value is possible.

Color

Color

Modified colors won't show their references in variables.

Number

none

Controls layer visibility applied as a number variable.

Number

none

Converted to a unitless number. Rem units are converted to pixel equivalent.

Number

none

If units are added to the token there are unexpected results (known issue).

Number

none

If units are added to the token, the unit will be dropped.

Number

none

If units are added to the token, the unit will be dropped.

Number

none

If units are added to the token, the unit will be dropped.

Number

none

If units are added to the token, the unit will be dropped.

none

none

Variables referenced in the token value will appear for color and border-width properties.

none

effect

Variables referenced in the token value will appear for color and dimension properties.

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.

String

none

Exported as a part of the Text style created by the Typography Token (composite).

String / Number

none

Exported as a part of the Text style created by the Typography Token (composite).

Number

none

Exported as a part of the Text style created by the Typography Token (composite).

Number

none

Exported as a part of the Text style created by the Typography Token (composite).

Number

none

Exported as a part of the Text style created by the Typography Token (composite).

Number

none

Exported as a part of the Text style created by the Typography Token (composite).

none

none

Exported as a part of the Text style created by the Typography Token (composite).

none

none

Exported as a part of the Text style created by the Typography Token (composite).

How it works

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.

Export to Figma options

The Export to Figma options allow you to make some key configurations:

  1. Export your Tokens as Variables, Styles or both.

    • Define which types of variables you want to export.

  2. Choose any Style specific settings.

    • Style name modifications.

    • Style values with variable references.

  3. Choose any update-specific settings.

    • Token name changes.

    • Remove styles and variables no longer connected to a token.

Choose to export from Themes or Token Sets

Depending on your Tokens Studio licence and your Token Structure, you can choose to export to Figma connected to Themes or Token Sets.

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

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.

Once you've confirmed your selection, the Styles or Variables you selected will be Exported to Figma.


Skipped Tokens

There are some exceptions where the plugin has to 'skip' exporting some of your Tokens to variables.

Styles with Variable references

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.


Resources

Figma resources:

Community resources:

Known issues and bugs

Requests, roadmap and changelog

PreviousStyles and Tokens StudioNextExport Options

Last updated 3 months ago

Was this helpful?

→

→

→

→

→

Design in Figma -

The Tokens Studio collection of Variable videos -

Our friends at have free learning resources on Variables -

Tokens Studio Plugin GitHub - [Open issues for Figma export](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 Options guide for details and troubleshooting tips
Read the Export to Figma from Themes guide for detailed instructions.
Read the Export to Figma from Token Sets guide for detailed instructions.
Read the Skipped Variables guide for more details.
Read the Styles with Variable References guide for detailed instructions.
Overview of Variable Collections and Modes
YouTube Playlist
UI Collective
YouTube Playlist
Open issues for Figma export
Feature Request
Feature Request
Feature Request
Feature Request
Feature Request (blocked by Figma)
Feature Request
Boolean
Text
Color
Color - Gradient
Color - Modified (pro)
Opacity
Dimension
Number
Spacing
Sizing
Border Width
Border Radius
Border (composite)
Box Shadow (composite)
Typography (composite)
Font Family
Font Weight
Font Size
Line Height
Letter Spacing
Paragraph Spacing
Text Case
Text Decoration

💡 Something to share?

Submit it here!

🐞 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
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.
Once you've confirmed your Export Options, the Plugin brings you the place where you select which Tokens to export.
Page cover image

💌 Visit to contribute or subscribe to updates.

https://feedback.tokens.studio/