Collect design tokens & assets with Sources

Learn more about how to collect design data from sources like Figma and store them in Specify.

Sources

Sources are environments containing design data you want to make available through your Design API.

For instance, design tools like Figma, Adobe XD, or Sketch are environments where designers create and use design decisions. It makes perfect sense to collect design decisions like colors, icons, or text styles directly from there.

You could also have images stored inside a Google Drive or a Dropbox folder. Let's say you want to make those images available to everyone in your organization. Then, Google Drive and Dropbox would be valuable sources you could connect to your Design API.

You could even have design tokens defined in an Excel spreadsheet. Then, this spreadsheet would become a source you'd connect as well.

Sources are basically places containing design data you want to make available to other people.

In short, there are as many types of sources as there are environments where you store design data.

Repositories

Learn what repositories are and how to use them to store your design data in Specify.

Repositories are locations — like "folders" — containing your synchronized design data. A repository can contain all types of design tokens and assets Specify is compatible with.

They're called "repositories" because, like in git based versioning tools (e.g., GitHub), they act as a central storage location people will push data into or pull data from.

Specify is compatible with the following type of design data:

• border
• color
• depth
• duration
• gradient
• measurement
• opacity
• shadow
• text style
• bitmap
• vector
• font

👉 Learn how you can create a Specify repository.

Creating a source in Specify

To sync design data into your repositories in Specify you must connect Figma to Specify.

Collecting your design tokens and assets

Learn more about how you can collect every types of design data Specify is compatible with from Figma.

Color

How to create colors in Figma

We recommend you to define them in a shareable Figma library.

To import colors from Figma to Specify you must have:

1. Connected Figma to Specify as a source
2. Created a repository that will contain your colors

Importing colors from Figma to Specify is done by adding a new source:

1. Create a new design tokens category
2. Select "Color" as the type of design token
3. Choose your Figma account containing the Figma file you want to connect
4. Set the URL of your Figma file containing your colors
5. Select where your colors are stored inside your Figma file
6. Choose if your source will be automatically synchronized by Specify
7. Check if your colors are correctly detected by Specify

Video

Collecting Design Tokens from Figma to Specify, by Louis Chenais ↗︎

Learn how to connect Figma as a Source for your Specify repository.

Text Style

How to create text styles in Figma

We recommend you to define them in a shareable Figma library.

To import text styles from Figma to Specify you must have:

1. Connected Figma to Specify as a source
2. Created a repository that will contain your text styles

Importing text styles from Figma to Specify is done by adding a new source:

1. Create a new design tokens category
2. Select "Text styles" as the type of design token
3. Choose your Figma account containing the Figma file you want to connect
4. Set the URL of your Figma file containing your text styles
5. Select where your text styles are stored inside your Figma file
6. Choose if your source will be automatically synchronized by Specify
7. Check if your text styles are correctly detected by Specify

Video

Collecting Design Tokens from Figma to Specify, by Louis Chenais ↗︎

Learn how to connect Figma as a Source for your Specify repository.

Gradient

How to create gradients in Figma

We recommend you to define them in a shareable Figma library.

To import gradients from Figma to Specify you must have:

1. Connected Figma to Specify as a source
2. Created a repository that will contain your gradients

Importing gradients from Figma to Specify is done by adding a new source:

1. Create a new design tokens category
2. Select "Gradients" as the type of design token
3. Choose your Figma account containing the Figma file you want to connect
4. Set the URL of your Figma file containing your gradients
5. Select where your gradients are stored inside your Figma file
6. Choose if your source will be automatically synchronized by Specify
7. Check if your gradients are correctly detected by Specify

Video

Collecting Design Tokens from Figma to Specify, by Louis Chenais ↗︎

Learn how to connect Figma as a Source for your Specify repository.

Shadow

How to create shadows in Figma

We recommend you to define them in a shareable Figma library.

To import shadows from Figma to Specify you must have:

1. Connected Figma to Specify as a source
2. Created a repository that will contain your shadows

Importing shadows from Figma to Specify is done by adding a new source:

1. Create a new design tokens category
2. Select "Shadows" as the type of design token
3. Choose your Figma account containing the Figma file you want to connect
4. Set the URL of your Figma file containing your shadows
5. Select where your shadows are stored inside your Figma file
6. Choose if your source will be automatically synchronized by Specify
7. Check if your shadows are correctly detected by Specify

Video

Collecting Design Tokens from Figma to Specify, by Louis Chenais ↗︎

Learn how to connect Figma as a Source for your Specify repository.

Fonts

Unlike vectors and bitmaps, fonts are displayed in your UI through your text styles.

Thus, Specify automatically collects your fonts when you synchronize your text styles from Figma to Specify.

Measurement

How to create measurements in Figma

However, you can still create measurements in Figma by defining them in a specific frame.

Have a look at our Figma example file to help you get started with measurement design tokens:

To collect your measurements to Specify, you must have created a frame containing your measurements layers.

Specify will collect measurements based on:

• The name of your layers
• The width of your layers

Duration

However, you can still collect durations from Figma to Specify.

To collect your durations to Specify, you must create a frame containing your durations layers.

Specify will collect durations based on:

• The name of your layers will name your duration design tokens
• The text within your layers will define the value of your duration design tokens

Have a look at our Figma example file to help you get started with duration design tokens:

Opacity

However, you can still collect opacities from Figma to Specify.

To collect your opacities to Specify, you must create a frame containing your opacity layers.

Specify will collect opacities based on:

• The name of your layers will name your opacity design tokens
• The text within your layers will define the value of your opacity design tokens

Have a look at our Figma example file to help you get started with opacity design tokens:

Depth

However, you can still collect depths from Figma to Specify.

To collect your depths to Specify, you must create a frame containing your depths layers.

Specify will collect depths based on:

• The name of your layers will name your depth design tokens
• The text within your layers will define the value of your depth design tokens

Have a look at our Figma example file to help you get started with depth design tokens:

Border

Borders are not officially supported by Figma.

However, you can still collect borders from Figma to Specify.

To collect your borders to Specify, you must create a frame containing your borders layers.

Specify will collect borders based on:

• The name of your layers will name your border design tokens
• The text within your layers will define the value of your border design tokens

Have a look at our Figma example file to help you get started with border design tokens:

Vector

We recommend you to define them in a shareable Figma library.

You can define your vectors as traditional layers in Figma or as components with variants. However you defined them, you must to set your vectors or their individual variants as exportable so Specify can collect them.

Vectors defined as layers

Your vectors will be named after the name of their respective layer.

Vectors defined as components

Your vectors will be named after:

1. The name of their respective component
2. The name of their potential variants in the same order they are defined in Figma

To import vectors from Figma to Specify you must have:

1. Connected Figma to Specify as a source
2. A repository that will contain your vectors

Importing vectors from Figma to Specify is done by adding a new source:

1. Create a new asset category
2. Select "Vector" as the type of asset
3. Choose your Figma account containing the Figma file you want to connect
4. Set the URL of your Figma file containing your vectors
5. Select where your vectors are stored inside your Figma file
6. Choose if your source will be automatically synchronized by Specify
7. Check if your vectors are correctly detected by Specify

Video

How to collect vectors from Figma to Specify, by Louis Chenais ↗︎

Learn how to collect vectors from Figma to Specify

Bitmap

You can sync all image types supported by Figma to Specify (.png, .jpg, .gif).

Like vectors, you need to set your images as exportable to synchronize them into Specify.

Now you have collected your design data from sources and organized it in Specify, it's time to distribute it to destinations.