Create Styles with Variable references

For the Figma Styles which support Variable values, you can create and manage Styles with Variables references using Tokens Studio.

This allows you to take advantage of the workflow benefits of working with Tokens Studio in Figma while sharing Styles and Variables with consumers of your Figma libraries.

👀 Note

• If this is your first time Exporting to Figma, you'll want to get familiar with the basics of the process, then come back to this guide.

• If you have a Free licence for Tokens Studio, follow the Export to Figma from Token Sets method.

1. Token setup

Before you export your desired Tokens to Figma as Styles, ensure your Tokens have been created with Values that reference another token.

Ensure the Tokens you wish to Export as Styles living in a Token Set that is separate from the Tokens which are being referenced in their values.

• This allows the plugin to export the desired token as Styles or Variables.

2. Create the Variables being referenced.

If you haven't already, complete the Export to Figma as Variables process for the Tokens being referenced in the values of the Tokens you want to export as Styles.

Ensure the Tokens you want to export as Styles are NOT exported as Variables.

• The plugin can only identify a Token by name to either Styles or Variables, not both.

• If needed, delete and detach any Variables you want to be created as styles.

3. Export your Tokens

In order for the plugin to attach your Styles to the Variables you created, you have to configure the Token Sets or Themes you are Exporting as Styles to Reference the Token Sets where your Variables are located.

The process is slightly different if you are Exporting from Themes or Token Sets.

Export from Themes

If you are Exporting your Tokens from Themes, navigate to the Themes feature in the plugin.

• Open the Theme you want to Export as Styles

• Ensure your Theme configuration has:

  • Token Sets being Exported as Styles are Enabled.

  • Token Sets being referenced in their values are Reference only.

• Confirm and save the Theme configuration and close the Theme modal.

Open the Export to Styles and Variables modal and select your Export Options:

• The Style Types you want to create are selected (checkmark visible).

• The Create Styles with Variable references is selected (switch is on).

• Save and confirm.

Select the Themes you want to Export as Styles.

• Ensure the themes you have exported as Variables are not selected.

📸 INSERT IMAGE - Themes Selected 📸 #add-image

Check the newly created Styles.

• If the values are showing hard-coded values instead of your variables, don't worry!

• There's a known issue with the plugin where occasionally it needs to create the styles before it can attach the Variable references.

  • Repeat the Export to Styles flow again, and the plugin will be able to map your variables to your styles.

• When you see the name of your Variables in the values of the Styles, the process is complete!

↓ If you have unexpected results, read the Troubleshooting section below.

Ignore First Part of Token Name

Prefix Styles with Active Theme Name

Export from Token Sets

If you are Exporting your Tokens from Token Sets, open the Export to Styles and Variables modal and select your Export Options to ensure:

• The Style Types you want to create are selected (checkmark visible).

• The Create Styles with Variable references is selected (switch is on).

• Save and confirm.

From the Token Sets page, select the Change Sets Button to review your Token Set configuration.

Review your Token Set configuration:

• Token Sets being Exported as Styles are Enabled.

• Token Sets being referenced in their values are Reference only.

• Save and confirm.

Select the Export to Figma button

Check the newly created Styles.

• If the values are showing hard-coded values instead of your variables, don't worry!

• There's a known issue with the plugin where, occasionally, it needs to create the styles before it can attach the Variable references.

  • Repeat the Export to Styles flow again, and the plugin will be able to map your variables to your styles.

• When you see the name of your Variables in the values of the Styles, the process is complete!

↓ If you have unexpected results, read the Troubleshooting section below.

4. Troubleshooting

Here are the common issues you might run into the first couple of times you try this process.

Styles created with the correct values but not attached to Variables

If the Tokens you exported are created as styles with the correct value, but they are missing the connection to the attached Variable, the plugin is missing the information it needs to attach it to a variable.

Check your Token Values

• Ensure the Tokens you Exported have values that are referencing existing Tokens.

  • Values are the name of a token inside curly brackets: {token-name}

• Ensure the Tokens being referenced have been created as Variables

• If not:

  • Export to Figma as Variables for the Referenced Tokens so they are created

  • Export to Figma as Styles following the steps above.

Check your Export Options

• Ensure the Create Styles with Variable references option is enabled.

• If not, follow the Export as Styles steps above with the option enabled.

Styles created with empty values

If the Tokens you exported were created as Styles, but the values are "empty", the plugin is missing the information it needs to populate the values.

Check your Theme and Token Set configuration.

• Ensure the Token Sets containing the Tokens being referenced in the Values are reference only.

• Ensure the Token Sets containing the Tokens being Exported as Styles are Enabled

Styles created with partial values attached to Variables

If the Tokens you exported were created as Styles, but some of the values are hard-coded and others are referencing Variables, the plugin is missing a connection to some the Variables.

Check your Token Values and Token Types for compatibility.

• Not all Token Values and Token Types are compatible with Variables.

  • A common example of this is Typography Composite Tokens which have Percentage (%) in their values for Line Height or Letter Spacing.

• The plugin will create the Text Style and show attached Variable references for most of the properties.

• The values with percentages will remain as hard-coded values because Figma does not support numeric values with units.