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
  • Variables Skipped on Export
  • Token type isn't compatible
  • Multiple value Tokens
  • Value is "AUTO"
  • Value contains a percentage (%)
  • More than 5000 variables in one collection
  • Modes skipped
  • Resources

Was this helpful?

Edit on GitHub
Export as PDF
PreviousExport Using Token SetsNextStyles with Variable References

Last updated 4 months ago

Was this helpful?

Variables Skipped on Export

Tokens skipped when exporting as Variables When Exporting to Figma, the plugin sometimes can't create or update your Variables as expected.

Your Export to Figma Options configuration allows you to skip certain types of Variables if needed.

However, there are three main reasons why the plugin will skip creating individual Variables when Exporting to Figma:

  1. The Token Type isn't compatible with any Variable type.

  2. The Token Value isn't supported in Variables.

  3. You have exceeded the number of allowed variables.


Token type isn't compatible

Figma only supports , and Tokens Studio supports 24 unique Token Types in the plugin.

While we have figured out how to support most Tokens to Figma as Variables, these are the Token Types that will be skipped when you Export to Figma as Variables as there is no compatible Variable Type.

  • Asset Token

  • Composition Token

  • Other Token

Composite Token Types will also be skipped as Figma only supports single value Tokens as Variables. However, they can be exported as Styles with Variable references where possible.

Select the Token Type to jump to its guide and read the specific pro-tips on exporting as Styles with Variable references:

Multiple value Tokens

Figma only supports a single value for a variable.

This means if you have a Token with multiple values, like a Color Token with its value defined as a linear gradient, that Token can not be exported to Figma as a variable.

Tokens Studio supports multiple values for:

Value is "AUTO"

The AUTO value is used for Line Height Tokens and Typography Composite Tokens to match Figma's required string value.

The plugin isn't able to resolve the AUTO value but relies on Figma to apply the correct value based on the Font Size.

Figma only accepts numeric values for this property, and therefore, it is skipped when exporting as Variables.

  • When you export as Text Styles, the AUTO value will be applied in Figma as expected.

Value contains a percentage (%)

Figma's Number Variables must be unitless.

The plugin will skip Tokens with % values that should be exported as Number Variables as it can't resolve the value and pass it over to Figma is a numeric value.

If the Token Type is text or opacity, those will be exported as those Variables support the percentage value.

More than 5000 variables in one collection

If you export more than 5000 tokens as variables, we will create the first 5000 and skip the remaining Tokens.

  • This size of the Variable library is bound to lead to memory issues, so you might want to split up your Tokens into multiple collections.


Modes skipped

If you are exporting more Themes than you are allowed to have as modes in Figma, we will create as many as possible and then skip the remaining.

  • In the plugin, under the Themes dropdown, you will see the list of Themes in each Theme group.

    • We will create as many as possible, starting at the top.

In the image below on the left, there are 5 Themes within the brands Theme Group, and on the right, the first 4 Themes have been created as modes within a Variable collection in Figma called brands. The 5th Theme in our list at the bottom called black-berry was not exported.

Note that Figma doesn't allow Variable modes when a file isn't in a project

If you are on any paid plan and we aren't exporting your themes as expected, check to see if your Figma file is in your drafts folder.

The image below shows how to tell if your file is in your Drafts.

  • Move the file to a Figma project then Export to Figma as Variables again to create your other modes.


Resources

Figma resources:

Community resources:

Known issues and bugs

Requests, roadmap and changelog

Color Tokens as gradients ()

→

Each Figma plan allows for a different number of modes per Variable collection. →

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 -

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 -

→ Jump to the Export to Figma Options guide for more details
4 types of Variables
→ Read the Export to Figma Overview guide for a full list of Token Types and their compatible Variable Types
Styles with Variable References
Figma has a limit of 5000 variables per collection.
Read their pricing plan for more details
Overview of Variable Collections and Modes
YouTube Playlist
UI Collective
YouTube Playlist
Open issues for Figma export
Open issues for Figma Variables
Feature Request
Feature Request
Feature Request
Feature Request
Feature Request (blocked by Figma)
Feature Request

🐞 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

💌 Visit to contribute or subscribe to updates.

https://feedback.tokens.studio/

💡 Something to share?

Submit it here!
Color Tokens as Gradients
which can be exported as color Styles with Variable References
Spacing Tokens
Border Radius Tokens
Border Token
A Text Style created with Variable References from the Plugin will leave properties with percentage values attached to the Token value and not a Variable. The remaining text properties will be attached to Variables.
The plugin error appears after exporting to Variables with more Themes in a Group than Figma will allow.
The Figma UI shows the file location is in draft, which causes the Plugin to show an error message after exporting to Figma Variables.
Page cover image
Box Shadow Token
Typography Composite Tokens
Read the Typography Line Heights guide for more details.