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
Select a Figma account or connect to a new one
Provide the file URL
Set up the connection type
Choose your synchronization type
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.
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