Tokens Studio
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.
Video tutorial (7min) to help you sync tokens from Tokens Studio to your local git repo as CSS variables
To get the most out of this guide, you will need:
Specify automatically fetches Tokens Studio design tokens through the JSON file provided by the latter. The best way to keep your design tokens in sync with both tools is to host your JSON file in a repository like GitHub.
Good to know
- Specify is not yet compatible with:
- tokens whose values are based on maths
- gradient tokens
- If your tokens are inside themes you must set all your themes in a group so Specify can sync your tokens. Tokens aliases inside themes are not yet available and are coming soon.
- 1.Head to your Tokens Studio plugin in Figma
- 2.Within the settings tab, add a new sync provider
- 3.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.
- 1.Go to your Specify workspace
- 2.Click on "Create repository"
- 3.Name your repository
- 4.
- 5.Click on "Create repository"
- 6.In the "Source" tab, click on "Create a source"
- 7.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.
- 1.In the "Source" tab, click on "Create a source"
- 2.Select "Remote URL"
- 3.Select "Public"
- 4.Name your source
- 5.Paste your raw public URL of your JSON file
- 6.Select the format "Tokens Studio"
- 7.Let Specify check the connection
- 8.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 a repository created
- Have a JSON file containing design tokens from Tokens Studio
To add a private URL source from GitHub to Specify:
- 1.In the "Source" tab of your Specify repository, click on "Create a source"
- 2.Select "Remote URL"
- 3.Select "Private"
- 4.Name your source
- 5.Create and Paste this GitHub file URL such as:
https://api.github.com/repos/
{owner}
/
{repo}
/contents/
{file_path}
Learn more in the GitHub documentation - 6.Select "Bearer Token" as the auth system & paste your personal access token from GitHub (Create an access token ↗︎ and be sure to check the repo section)
- 7.Select "Tokens Studio Format"
- 8.Specify will test your JSON
- 9.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:
- 1.In the "Source" tab of your Specify repository, click on "Create a source"
- 2.Select "Remote URL"
- 3.Select "Private"
- 4.Name your source
- 5.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
- 6.Select "Basic Auth" as auth system & fill in your credentials
- 7.Select "Tokens Studio Format"
- 8.Specify will test your JSON
- 9.And voila!
Requirements:
- Have a GitLab account
- Have a repository created
- Have a JSON file containing design tokens from Tokens Studio
To add a private URL source from GitLab to Specify:
- 1.In the "Source" tab of your Specify repository, click on "Create a source"
- 2.Select "Remote URL"
- 3.Select "Private"
- 4.Give a
name
to your source - 5.Paste your GitLab file URL such as:
https://gitlab.com/api/v4/projects/{OrgName}%2F{RepositoryName}/repository/files/{FilePath}?ref={branch}
- 6.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.
- 7.In Specify, select
Header
as auth system- 1.Fill
PRIVATE-TOKEN
in thekey
field - 2.Paste your GitLab project access token
- 8.Select "Tokens Studio Format"
- 9.Specify will test your JSON
- 10.And voila!
Requirements:
- Have a JSONBin account
- Have a bin with a JSON file containing design tokens from Tokens Studio
To add a private URL source from JSONBin to Specify:
- 1.In the "Source" tab of your Specify repository, click on "Create a source"
- 2.Select "Remote URL"
- 3.Select "Private"
- 4.Name your source
- 5.Paste your BIN private URL such as
https://api.jsonbin.io/v3/b/{bin_id}
- 6.Select
Header
as auth system - 7.Depending on your choice, you can use your
master key
or anaccess key
. Head toward this page on JSONBin.- 1.Following your choice, fill in the
key
field either withX-MASTER-KEY
orX-ACCESS-KEY
- 2.Paste your key in the
value
field
- 8.Select "Tokens Studio Format"
- 9.Specify will test your JSON
- 10.And voila!
After adding your source. All you have to do is to:
- 1.Go to the "Source" tab of your Specify repository
- 2.Click on the context menu next to your source
- 3.Click on "sync"
Your source is now updated!
Specify is yet not compatible with the following options of Tokens Studio:
- Maths
- Composition
- Assets (bitmap & vectors)
- Color manipulation (gradients, alpha, darken, lighten & mix)
They will be released in future updates. However, if you have urgent needs for Specify to be compatible with one of them, feel free to send us feedback.
Last modified 13d ago