How are design tokens handled in Figma?

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:

  • Colors

  • Gradients

  • Shadows

  • Text 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.

How to sync design tokens unsupported by Figma?

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.

How does the extraction work?

You can extract your design tokens from your Figma files:

  • Local styles — Where are design tokens natively supported by Figma

  • Frames — Where you define design tokens Figma doesn't support yet

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

Version control with Figma

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:

  • Current version

  • Last published version (recommended)

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.

Did this answer your question?