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 Figma Variables and Styles with a Specify Repository
  • 2. Connect your Specify account
  • 3. Create a repository in Specify
  • 4. Connect the Specify Repository in your Widget
  • 5. Sync updates variables and styles on the fly
  • 6. Check or delete your source inside the Specify interface

Was this helpful?

Export as PDF
  1. Collect
  2. Available sources

Figma Variables & Styles

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.

PreviousAvailable sourcesNextTokens Studio

Last updated 1 year ago

Was this helpful?

Before getting started

To get the most out of this guide, you will need:

  • A Specify Account

  • A Figma file containing Variables and/or Styles

1. Sync your Figma Variables and Styles with a Specify Repository

  • Access your Figma file which includes the Variables and/or Styles you would like to sync to Specify

2. Connect your Specify account

  1. Click "Connect"

  2. 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".

3. Create a repository in Specify

  1. Go to your Specify workspace

  2. Click on "Create repository"

  3. Choose a name

  4. Click "Create repository"

4. Connect the Specify Repository in your Widget

  1. Go back to your Figma file that includes the Variables and/or Styles

  2. Click on "Create Source" in the Specify Widget

  3. It will show you the local collections and styles that are detected

  4. 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).

  5. Click "Save to Specify"

  6. You will immediately see the repository listed with the latest syncing time

Make sure to understand that only Advanced repositories are listed here.

5. Sync updates variables and styles on the fly

6. Check or delete your source inside the Specify interface

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

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.

Select "Advanced Repository" ()

Select the design tokens format you want to collect from your Figma file.

Use the Sync button to update your Variables and/or Styles with Specify. Now you are ready to ! 🎉

Download ↗
Watch tutorial ↗
Learn more ↗︎
Learn More ↗︎
export your design tokens
How to sync Figma Variables and Styles to Specify (3min)
Create a repository in Specify
Create a source in your Specify Widget in your Figma file
Use the sync button to update new variables