Creating variables

Figma’s newest update features Variables, Figma’s version of design tokens. It allows you to create number, color, boolean and content variables. Tokens Studio for Figma will let you create variables based on your tokens. This works using the Themes feature.

At the bottom of the plugin window there’s a button called Styles & variables. Inside, you will find an action “Create variables”. Clicking this will cause any tokens that are part of a Theme to be created as a variable inside a variable Collection.

When your theme groups have multiple themes inside, such as a group called “Colors” with two themes inside called “Light” and “Dark”, we will create a collection with two modes: Light, and Dark in a collection called “Colors”. That means you can have 1:1 mapping between Figma Variables and your collections.

The plugin will try to create any variables that Figma understands.

For now, as Figma doesn’t support those yet, here’s a list of tokens that Figma does not support yet, the plugin ignores the creation of these as we can’t create what is not supported:

• Any typography tokens
• Any shadow tokens
• Gradients
• Border tokens
• Multi-value spacing and radius tokens

The following tokens will be imported, but will lose their references:

• Alpha-modified tokens. Figma so far does not support references that change the alpha value.

As Figma only has the number variable, we will convert any tokens of type dimension, spacing, sizing, borderRadius to the number equivalent and will strip away the unit.