Add Figma as a source

This article helps you connect Figma as a source for your Specify repository.

Updated over a week ago

A source provides design data for a specific type of design data inside a Specify repository. Every repository's category can have several sources.

During the process of connecting a source, some settings can differ depending on the type of source and token.

Figma provides many design tokens. Specify is able to extract design tokens either from:

  • Local styles

  • A frame

Figma supports the following design tokens in a document local styles:

  • Colors

  • Gradients

  • Shadows

  • Text styles

All the other types of design token, such as measurement, border, and opacity are not officially supported by Figma. However, many teams still define them in frames.

Therefore, in the source's connection settings, you can select to extract your design tokens from the document's local styles or from a specific frame.

Check our Figma template file to understand how Figma and Specify work together.

How to connect a Figma document as a source

  1. Select a Figma account or connect to a new one

  2. Provide the file URL

  3. Set up the connection type

  4. Choose your synchronization type

  5. Specify will test the connection and show you a preview of the synchronized design tokens

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

Two ways of managing a Figma document's layers. So that Specify can access design tokens in your layers, they must be in the the first level. Grouped layers cannot be currently accessed by Specify.

Now that your source is connected to your repository category, design tokens will populate your category.

To update a source, head over to the Sources Panel. You will be able to:

  • Edit it

  • Deactivate it

  • Delete it

Did this answer your question?