Figma manages design tokens in its file's local styles. See them as variables that can be used in every file owned by a team.

Design tokens officially supported by Figma within their local styles:

By linking Figma to your repository, you can extract all the design tokens defined in a Figma file to Specify. Every modifications made in your connected Figma file will be reflected in your Specify repository.

Many teams define other types of design tokens by creating them in specific frames.

For instance here is a spacing scale defined in a frame:

The good news is that Specify is compatible with both design tokens defined in your local styles or inside frames.

When adding a source and linking a Figma file within Specify, you'll be able to set a "Connection Type" to choose between local styles or frames.

You can extract your design tokens from your Figma files:

☝️ When selecting Frame as a connection type, please keep in mind that only first-level layers will be extracted.
​

Specify also takes advantage of the native version control Figma provides. When adding a source, you are in control of the Figma document version you link to Specify.

To share your local styles modifications, publish them as a new version.

When adding a Figma file as a source, you can define the document version you want to synchronize:

You probably don't want to push into Specify unfinished work or your design exploration. This is why synchronizing the last published version is more appropriate when the auto-synchronization is set. It acts as a safeguard between your work and your Specify repository.

Take a look at our Figma example file to see how Specify handles design tokens in Figma.

👉 Learn more about how to add a Figma document as a source.