Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
We provide the first Design Data Platform allowing you to send your design tokens and assets across your design system tools. Specify is built with this idea: configure once, synchronize anytime.
Specify is a central and tool-agnostic platform. It means you can integrate your daily applications to collect, store and distribute your design decisions to the right teams, in the right format, at the right time. To sum things up, see Specify as the synchronization layer for your design data at the heart of your design system.
Designers, connect your favorite design tool, like Figma, and let Specify monitor and collect your design tokens and assets automatically. This way, you control what is sent to developers and reduce the risk of inconsistencies.
Teams can benefit from a single source of truth and a continuous delivery system that ensures brand consistency.
In short, you have more time to focus on what matters most: your products and your end-users.
Specify is built on core concepts such as sources, destinations, pipelines, parsers. This page will help you understand all of them.
A Design API is an API designed to synchronize information in your design system. This includes design tokens, assets, components and documentation.
A source is a place that contains data you want to sync within your design system. Like a Figma file from which you sync your colors from. Or a GitHub repository containing your design tokens in JSON.
A destination is a place in which you distribute data in. Like a GitHub repository consuming colors coming from your design system or a Notion database in which you document your icons.
A pipeline is the route that connects a Source or a Destination to Specify. It helps you transform and synchronize data (e.g., design tokens) within your design system.
A repository is like a folder containing your design tokens and assets in Specify. Use repositories to store and organize your design data.
A Token type is a type of design token or asset supported by Specify like a colors, a text style or an icon. See all token types.
By default Specify returns design tokens and assets in JSON. Configure it to generate design data compatible with your company standards (e.g., CSS Variables).
A rule is a part of your configuration that helps you transform one or several Token types the way you want. Like a rule to pull colors from Specify as CSS Variables in a CSS file.
Parsers are functions allowing you to transform design tokens and assets coming from Specify to fit your needs and company standards. See all parsers.
Here’s a 5 minute guide on how to use different features within the Advanced Repository based on the Specify Design Token Format.
Specify is building an entirely new Design Token Format (SDTF) to base our platform on a new design token graph. In short, this means that we are developing a format that enables more possibilities to add code-type sources and destinations than before. The new graph will facilitate managing a large number of design token types and assets. Next to this, it opens doors to more advanced features such as Aliases, Modes, and Collections.
In a more practical sense, the SDTF opens up compatibility with Figma Variables and Tokens Studio as a source alongside the existing Figma local styles compatibility. It also creates opportunities to create code output that includes aliases, modes, and collections.
All of these features come together in the Specify Advanced Repository.
A 5min guide on collecting and pulling your first design tokens and assets with Specify.
In this guide you’ll learn how to pull your first design tokens and assets to CSS Custom Properties using the Specify CLI.
This guide helps you to sync tokens from Figma local styles and frames to Specify. Want to sync Figma Variables instead? Click here to learn more.
To get the most out of this guide, you’ll need:
A Specify account
A Specify repository containing some design tokens and assets (Learn more ↗)
Install @specifyapp/cli
via npm or Yarn.
Create a configuration file for your desired output format using one of our templates ↗️
Add your Specify repository
from which you want to pull your design tokens and assets. Learn more ↗.
Generate a personalAccessToken
for the CLI and add it in your configuration.
Our configuration is ready and we can now pull our design tokens and assets using the pull
command.
In this guide, you’ll learn how to sync your Figma Variables and/or Styles to a Specify Repository and how to keep them updated.
To get the most out of this guide, you will need:
A Specify Account
A Figma file containing Variables and/or Styles
Access your Figma file which includes the Variables and/or Styles you would like to sync to Specify
Download ↗ the Specify Widget in the Figma file which includes your Variables and/or Styles. Or update the widget if you already have it. To update the Specify Widget you have to disconnect it, remove the entire frame in all of your Figma files, and reopen the latest version of the Widget.
Follow the steps in the widget to connect your account. You will need to create a personal access token and you will need to add the link to the Figma file to which the widget is added. Watch tutorial ↗
Click "Connect"
Choose Advanced Repository
Note: the widget can be used for syncing Figma Styles from the Classic repositories as well, you can switch between the two by clicking "Switch to".
Go to your Specify workspace
Click on "Create repository"
Choose a name
Select "Advanced Repository" (Learn more ↗︎)
Click "Create repository"
Go back to your Figma file that includes the Variables and/or Styles
Click on "Create Source" in the Specify Widget
It will show you the local collections and styles that are detected
Select the design tokens format you want to collect from your Figma file. Learn More ↗︎
Select the Specify repository you want to sync with. You should be able to see the Repository you have just created in Specify (if not, reload the list).
Click "Save to Specify"
You will immediately see the repository listed with the latest syncing time
Make sure to understand that only Advanced repositories are listed here.
Use the Sync
button to update your Variables and/or Styles with Specify. Now you are ready to export your design tokens! 🎉
You will see the category of design tokens that are synced on the left-hand side
In the Sources
section (left-hand menu), you will see your connection(s) and when the last sync between your Figma file and Specify repository has occurred.
Delete your source by clicking on the 3 dots option menu in the source card.
Welcome to the Specify docs! Learn about how to use and integrate Specify in your workflow to sync your design tokens and assets in your design system.
Learn how to distribute your design tokens from Specify to your GitHub repositories via automated Pull Requests.
Specify will sync your GitHub repository if you have a config file .specifyrc.json
saved at the root of your GitHub repository.
Please make sure you have:
A GitHub account
A Specify account
One or multiple new Advanced Repositories Specify repositories containing some design tokens.
Want to connect a GitHub repository from your GitHub organization? Please make sure you have the correct access rights. Otherwise, you'll need an owner to approve your installation request.
Select GitHub
Click on "Connect"
Select the repositories you want Specify to have access to
You will now be able to connect your Specify and your GitHub repositories together 🎉
Once you've connected your GitHub account, Specify has to know what design tokens to synchronize and how.
Go to the Specify Advanced Repository you want to distribute design data from
Go to its "Destinations" page
Click on "Create Pipeline"
Select "GitHub application"
Select your GitHub account
Select the GitHub repository you want to distribute your design data to
Create the Pull Request containing your configuration file
Merge the PR created by Specify containing your configuration file
Specify will now automatically sync design data to your GitHub repository 🎉
In this guide you’ll learn how to transform design data coming from Figma Variables, Figma Styles and/or Tokens Studio into CSS Custom Properties using the Specify CLI.
Install the @specifyapp/cli
via npm or Yarn.
To create your Specify config file, you need to follow these steps:
Create an empty file named .specifyrc.json
Add the following content
A property version
is shown which refers to the new Advanced Repository from which we are extracting tokens. Use the version: "2"
.
Add your organization and repository name under the repository
property.
Run the command specify pull
to fetch your design tokens.
Specify exports your Figma Variables Modes as CSS data-attributes:
We would like to improve this output according to your needs as much as we can. Feel free to share your feedback with us via:
The in-app chat
Things to take into account when using the CLI
The configuration file can handle MJS, CJS, and JSON.
There is no more path
property in the parser settings, it is now replaced by an output
key inside every parser.
In this guide you’ll learn how to sync your design tokens from Tokens Studio to your Specify repository and how to keep them updated.
To get the most out of this guide, you will need:
Specify automatically fetches design tokens through the JSON file created by Tokens Studio. The best way to keep your design tokens in sync with both tools is to host your JSON file in a repository like GitHub.
Head to your Tokens Studio plugin in Figma
Within the settings tab, add a new sync provider
Commit your Tokens Studio JSON file to your repository
You can also manually export your file from Tokens Studio and upload it manually to your code repository. Click on Tools on the bottom left of the plugin and Export to file/folder. Be careful to tick all the boxes before exporting. We are not supporting multiple files at the moment.
Go to your Specify workspace
Click on "Create repository"
Choose "Advanced Repository"
Name your repository
Click on "Create repository"
In the "Source" tab, click on "Create a source"
Select "Remote URL"
At this point, you have two ways to sync your JSON file. Either with a public hosting link or a private one. We will go through both options below.
In the "Source" tab, click on "Create a source"
Select "Remote URL"
Select "Public"
Name your source
Paste your raw public URL of your JSON file
Select the format "Tokens Studio"
Let Specify check the connection
And voila!
Your JSON file is now detected as a source and your design tokens appear within your repository.
On the opposite of the public URL, Specify will ask you for some additional information so its system is able to fetch your file. Let’s see how to proceed with the main versioning tools:
Requirements:
Have a GitHub account
Have an Advanced Repository created
Have a JSON file containing design tokens from Tokens Studio
To add a private URL source from GitHub to Specify:
In the "Source" tab of your Specify repository, click on "Create a source"
Select "Remote URL"
Select "Private"
Name your source
Select "Tokens Studio Format"
Specify will test your JSON
And voila!
Requirements:
Have an Azure DevOps account
Have a Project containing a repository
Have a JSON file containing design tokens from Tokens Studio
To add a private URL source from Azure DevOps to Specify:
In the "Source" tab of your Specify repository, click on "Create a source"
Select "Remote URL"
Select "Private"
Name your source
Paste your Azure DevOps file URL such as https://dev.azure.com/{OrgName}/{ProjectName}/_apis/git/repositories/{RepositoryName}/items?path={FilePath}&api-version=7.0&includeContent=true
Select "Tokens Studio Format"
Specify will test your JSON
And voila!
Requirements:
Have a GitLab account
Have an Advanced Repository created
Have a JSON file containing design tokens from Tokens Studio
To add a private URL source from GitLab to Specify:
In the "Source" tab of your Specify repository, click on "Create a source"
Select "Remote URL"
Select "Private"
Give a name
to your source
Paste your GitLab file URL such as: https://gitlab.com/api/v4/projects/{OrgName}%2F{RepositoryName}/repository/files/{FilePath}?ref={branch}
Create an access token in GitLab: "Settings > Access Tokens". Select a role as Developer or Owner and select the scopes of read_api and read_repository.
In Specify, select Header
as auth system
Fill PRIVATE-TOKEN
in the key
field
Paste your GitLab project access token
Select "Tokens Studio Format"
Specify will test your JSON
And voila!
Requirements:
Have a JSONBin account
Have an Advanced Repository created
Have a bin with a JSON file containing design tokens from Tokens Studio
To add a private URL source from JSONBin to Specify:
In the "Source" tab of your Specify repository, click on "Create a source"
Select "Remote URL"
Select "Private"
Name your source
Paste your BIN private URL such as https://api.jsonbin.io/v3/b/{bin_id}
Select Header
as auth system
Following your choice, fill in the key
field either with X-MASTER-KEY
or X-ACCESS-KEY
Paste your key in the value
field
Select "Tokens Studio Format"
Specify will test your JSON
And voila!
After adding your source. All you have to do is to:
Go to the "Source" tab of your Specify repository
Click on the context menu next to your source
Click on "sync"
Your source is now updated!
Please keep in mind Specify is yet not compatible with the following data coming from Tokens Studio:
Composition
Assets (bitmap & vectors)
Color manipulation (gradients, alpha, darken, lighten & mix)
Go to the applications catalog
Name for your configuration file ()
Get a personal access token .
A account
The plugin installed in your Figma
A , , , or account
Select "Sync from Figma Variables & Tokens Studio" ()
Create and Paste this GitHub file URL such as: https://api.github.com/repos/
/
/contents/
Select "Bearer Token" as the auth system & paste your personal access token from GitHub ( and be sure to check the repo section)
Select "Basic Auth" as auth system. Use your Azure DevOps email and a new Azure DevOps personal access token with Full Access or Code -> Read permissions.
Depending on your choice, you can use your master key
or an access key
. on JSONBin.
They will be released in future updates. However, if you have urgent needs for Specify to be compatible with one of them, .