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 is 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
Color
Number (used for some dimensions)
Sizing
Spacing
Radii
String
Boolean
How to create local variables
When the canvas of Figma is focused, the Local variables appear on the top-right panel. Click on the settings button.
Create a collection. We recommend using different collections for different variable types. For example, "Colors Themes" could be one, or "Languages" another.
Here you can define in the columns your different Modes (ex. Light, Dark).
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.
File, pages, frames and sections
You can sync vectors and bitmaps set as exportable from your Figma file, pages, frames and sections.
Design token types supported by Specify
Vectors (SVG, PDF)
Bitmaps (PNG, JPG)
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. You can even sync Variables mapped to Styles.
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 only sync aliases from the first level library and these variable values will be displayed as raw values in Specify.