All Collections
Collect design tokens from Sources
When to use Figma Styles, Frames, or Variables?
When to use Figma Styles, Frames, or Variables?

Not all design tokens are available in Figma. This article is to help you understand which design tokens are compatible with Figma features.

Updated over a week ago

In Figma, you have multiple options to create design tokens compatible with Specify.

If you need help using our Figma Widget to create a source to Specify or synchronize your design tokens, read this article ↗︎.

Local Variables

Figma variables are the most recent way to create design tokens in Figma. It supports Modes and Collections. This means you could define different themes like Light Mode and Dark Mode and define your variables for each mode.

These variables can be used directly inside Figma to create your mockups and they'll adapt to the Modes you defined in your frames.

ℹ️ We recommend using this way of defining design tokens if the token types correspond to your needs, as it will be the most advanced way to define design tokens.

Variables design token types supported by Specify

  • Colors

  • Numbers (used for some dimensions)

    • Sizing

    • Spacing

    • Radii

  • Strings

  • Booleans

How to create local variables

  1. When the canvas of Figma is focused, the Local variables appear on the top-right panel. Click on the settings button.

  2. Create a collection. We recommend using different collections for different variable types. For example, "Colors Themes" could be one, or "Languages" another.

  3. Here you can define in the columns your different Modes (ex. Light, Dark).

  4. You now have to create your variable within the collection. Their values can be aliases of another variable.

Local Styles

For other types of design tokens, you can also define Styles. They can be used in your Figma mockups and saved in Libraries.

💡 Pro tip: you can also use Variables inside Color styles. Select "Variables & Local Styles" when creating the source inside the Specify widget to collect everything.

Styles design token types supported by Specify

  • Colors

  • Gradients

  • Text Styles

  • Shadows

  • Blurs

ℹ️ Specify won't collect Grid, or combined blurs defined in Local Styles.

Frames, Pages, or File

When the design tokens are not available natively, Specify can collect them when they are defined in Frames, Pages, or a Figma File. We can, for example, detect all the vectors (exportable) in your whole document and collect them in Specify to help you export them into code.

Design token types supported by Specify

  • Vectors (SVGs)

What design tokens format(s) should I sync with the Specify widget?

Inside the creation of a source in the Specify widget, the options are:

  • Variables & Local Styles: select this one if you have both Variables and Styles that you want to collect from this Figma file or if you plan to have both.

    ☝️ NB: We are working on being compatible with having Variables as Local Styles values and collecting them as aliases.

  • Only Local Styles: if you only want to collect Styles, know that all the values will be resolved, they will be sent as raw values. You cannot keep the links between styles and variables without collecting variables.

  • Only Variables: you can collect all your variables alone.

Note: if you have variables referencing variables from other Figma file libraries, we cannot collect their aliases. All your variables need to be inside the same Figma file for the moment.

Did this answer your question?