Specify Docs
Specify ↗︎Changelog ↗︎Guide ↗︎
V2
V2
  • Getting started
    • Introduction
    • What is Specify?
    • Pulling your first tokens with the CLI
    • Glossary
  • Collect
    • What is a Source?
    • Available sources
      • Figma Variables & Styles
      • Tokens Studio
  • Distribute
    • What is a Destination?
    • Available destinations
      • GitHub
      • Specify CLI
      • Specify SDK
      • HTTP API
  • Concepts
    • Overview
    • Parsers Engine
    • SDTF Client
      • SDTF Engine
    • Specify Design Token Format
  • Guides
    • Configuration file 101
    • Specify CLI usage 101
      • Getting started
      • Authentication
      • Generate Files
    • Specify SDK usage 101
      • Getting started
      • Retrieving and working with the tokens
      • Updating tokens
      • Converting a token to XXX
      • Executing generation parsers
    • Specify SDK Cheatsheet
    • Manage font files
    • Querying a SDTF graph
  • Reference
    • Parsers Engine
    • Parsers
      • change-case
      • convert-color
      • convert-dimension
      • make-line-height-relative
      • filter
      • register-view
      • select-modes
      • prefix-by
      • suffix-by
      • replace-string
      • to-css-custom-properties
      • to-css-text-style
      • to-css-font-import
      • to-flutter
      • to-javascript
      • to-json
      • to-json-list
      • to-kotlin
      • to-react-native
      • to-scss-mixin-text-style
      • to-scss-map
      • to-sdtf
      • to-style-dictionary
      • to-swift
      • to-tailwind
      • to-typescript
      • svgo
      • svg-to-jsx
      • svg-to-tsx
      • to-svg-file
      • to-bitmap-file
      • to-file
    • Specify SDK
      • SpecifyClient
      • SDTFClient
      • Converters
        • CSS
      • ParsersEngineResults
    • SDTF Engine
      • Query API
      • Mutation API
      • SDTF Query Language
      • SDTF QueryResult
      • TokenState
        • Stateful Value
    • HTTP API
      • POST /parsers-engine-rpc
    • Specify CLI
  • Resources
    • Parser Rules templates
      • CSS Custom Properties
      • Tailwind
      • React Native
      • Flutter
      • SDTF
      • JSON
    • Specify CLI VS Specify SDK
    • Playground
    • Best practices
  • Useful links
    • Discord
    • YouTube
    • Twitter
    • Help Center
    • Canny
Powered by GitBook
On this page
  • Before getting started
  • 1. Sync your design tokens from Tokens Studio to a provider
  • 2. Add your JSON file from a provider to your Specify Repository
  • From a public URL
  • From a private URL
  • 3. How to update your JSON File
  • 4. Non-supported design token types

Was this helpful?

Export as PDF
  1. Collect
  2. Available sources

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.

PreviousFigma Variables & StylesNextWhat is a Destination?

Last updated 11 months ago

Was this helpful?

Before getting started

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.

1. Sync your design tokens from Tokens Studio to a provider

  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.

2. Add your JSON file from a provider to your Specify Repository

  1. Go to your Specify workspace

  2. Click on "Create repository"

  3. Choose "Advanced Repository"

  4. Name your repository

  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.

From a public URL

  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.

From a private URL

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:

GitHub

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:

  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. Select "Tokens Studio Format"

  6. Specify will test your JSON

  7. And voila!

Azure DevOps

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 "Tokens Studio Format"

  7. Specify will test your JSON

  8. And voila!

GitLab

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:

  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 the key field

    2. Paste your GitLab project access token

  8. Select "Tokens Studio Format"

  9. Specify will test your JSON

  10. And voila!

JSONBin

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:

  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

    1. Following your choice, fill in the key field either with X-MASTER-KEY or X-ACCESS-KEY

    2. Paste your key in the value field

  7. Select "Tokens Studio Format"

  8. Specify will test your JSON

  9. And voila!

3. How to update your JSON File

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!

4. Non-supported design token types

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)

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/{owner}/{repo}/contents/{file_path}

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, .

Specify
Tokens Studio
GitHub
GitLab
Azure DevOps
JSONBin
Learn more ↗︎
Learn more in the GitHub documentation
Create an access token ↗︎
Learn more in the Azure DevOps documentation
Learn more on the GitLab documentation
Head toward this page
feel free to send us feedback
GitHub
Azure DevOps
GitLab
JSONBin
Video tutorial (7min) to help you sync tokens from Tokens Studio to your local git repo as CSS variables