Export Options | Tokens Studio for Figma

PreviousExport to Figma Guide NextExport 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

PreviousExport to Figma Guide NextExport Using Themes (pro)

Last updated 4 months ago

Was this helpful?