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 ↗︎.
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.
Variables design token types supported by Specify
Numbers (used for some dimensions)
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.
For other types of design tokens, you can also define Styles. They can be used in your Figma mockups and saved in Libraries.
Styles design token types supported by Specify
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
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.