Variables and Styles
Export Themes to Figma Pro

Export to Figma from Themes (pro)

✦

Pro Feature
The Export to Figma from Themes feature requires a Pro Licence for Tokens Studio.

The Themes (pro) feature allows groups of Token Sets to work together to perform various tasks. When you attach your Tokens to Styles and Variables by Exporting to Figma from Themes, there are some powerful workflow advantages:

  • Choose which Themes are attached to Styles and Variables.
    • Styles can have Variable references.
    • Variable collections with mode switching is supported.
  • Separate Figma Files can have Styles and Variables attached to different Themes.
    • Also known as Non-local Variable references

→ Learn more about the Themes (pro) feature.

Do you have a Free licence for Tokens Studio? → Learn how to Export to Figma from Token Sets.

How it works

Once you have created your Themes (pro) in the plugin, select the Styles & Variables Button from the Tokens page.

Choose the Export Styles & Variables option.

The Export Options menu will open and allow you to choose which actions the plugin should perform on the Tokens included in your export:

  • Export your Tokens as Variables, Styles or both.
  • Choose any Style export specific settings.
  • Choose any update specific settings.

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

Once you confirm your Options, you'll see the Export as Themes or Token Sets page. This is where you choose which Tokens are included in your export.

  • If you have a Pro licence for Tokens Studio, you'll be brought directly to the Themes tab.

Export from Themes

The Export from Themes page will display a list of all Themes you've already created.

  • If you don't see any Themes listed, you'll need to create a Theme to complete the export.

→ Learn more about the Themes (pro) feature.

Choose which Themes to export

By default, all Themes are selected for Export (checkmark is visible).

  • Adjust which Themes you'd like to Export by selecting the checkbox.

The plugin applies your Export Options to all compatible Tokens included in the Export.

✦

Exporting as Styles
When exporting as Styles, try exporting one Theme at a time. \ This reduces the complexity of the export and reduces unexpected results.

Confirm and complete the Export to Figma

Once you have confirmed the Themes to be included in the Export, you can review the Export Options by selecting the Options button from the bottom of the plugin if needed.

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

Select the Export to Figma button at the bottom of the plugin to complete the process.

Export as Variables feedback messages

When exporting Variables, you'll see a feedback message at the bottom of your Figma file depending on your configuration.

  • If you are creating new Collections of Variables or adding Variables within an existing collection, the message will show a count of what was created (right side of the image below).
  • If you are updating existing Variables, the message will tell you that no Variables were created, but will not tell you that Variables were changed (left side of the image below).

It's also common to see a red message at the bottom of your file, indicating an error in the export.

Your Figma plan only allows for the creation of 1 mode

This message will appear if you have a Free Figma plan, or the Figma file is in your Drafts instead of a Project. 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.

Your Figma plan only allows the creation of 4 modes

This message will appear if you have 5 or more Themes within your Theme Group. The Plugin will export the first 4 Themes to your Variable collection (starting at the top of the Themes list) and skip the rest.

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.

Check your exported Styles and Variables

Check the exported Styles and Variables to ensure you have the output to Figma you expected.

  • This is highly Variable based on the combination of the Export Options and the Themes you selected to export.

Recall that each Export is limited to the Tokens in the Themes selected.

  • You may have to repeat the Export to Figma process with different configurations to update all of your Styles and Variables.

However, if you have unexpected results, review these guides, which cover the common troubleshooting tips:

Export Themes to multiple Figma files

With the release of V2, the plugin is now able to support the use of Themes across multiple Figma files.

→ Read the Non-local Variables guide for more details

Limitations with Variables

There are some known limitations between Tokens Studio and Figma Variables.

Theme switching in the plugin won't work

Once you Export to Figma using Themes, you will be required to use Figma's native Mode Switching feature.

  • The plugin's Themes witching feature does not work as expected when the Theme is attached to a Variable collection.

Scoping and Hide from Publishing

Tokens Studio is not able to control Figma's Scoping or Hide from Publishing features.

  • Once you've created the Variables, you can use the Figma native UI to adjust the desired settings.

Tokens skipped when exporting as Variables

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

→ Read the Skipped Variables when Exporting to Figma guide for full details.

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.

Export Sets to Figma
Create Styles with Variable references