Variables and Styles
Tokens skipped when exporting as Variables

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.

→ Read the Export to Figma Options guide for more details.

However, there are a few other reasons why the plugin might skip exporting your Tokens as variables or creating modes.

Variables skipped

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 4 types of Variables, 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:

  • Asset Token
  • Composition Token
  • Other Token

→ Read the Export to Figma Overview guide for a full list of Token Types and their compatible Variable Types

These Token Types will also be skipped but can be Exported as Styles with Variables referenced in their values:

  • Box Shadow Token
  • Color Tokens as Gradients
  • Border Token
  • Typography Composite Tokens
    • Their individual Property Tokens will export as variables when possible, but you need to create Text Styles with Variable references as a second step.

→ Read the guide on creating 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.

→ Read the Typography Line Heights guide for more details.

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

Figma has a limit of 5000 variables per 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

Each Figma plan allows for a different number of modes per Variable collection. → Read their pricing plan for more details

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 Drafts in Figma don't allow for modes!

  • 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:

💡 Something to share? Submit it here!

Known issues and bugs

🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our community Slack, or submit it on our feedback tool.

Requests, roadmap and changelog

💌 Visit https://feedback.tokens.studio/ to contribute or subscribe to updates.

Create Styles with Variable references
Creating variables with references