Collect Figma Variables & Styles

Here are the steps to collect Variables and/or Styles from Figma to your Specify repositories.

Updated over a week ago

Before getting started

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

  • A Specify Account

  • A Figma file containing variables or styles

1. Sync your Figma variables with a Specify repository

2. Connect your Specify account

  1. 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 ↗

  2. Click "Connect".

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

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

  3. Select "Local styles and/or Variables"

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

  5. Select the design tokens format you want to collect from your Figma file. Choose "Only Variables" or "Variables & Styles" to collect Figma Variables. Learn More ↗︎

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

  7. Click "Save to Specify"

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

5. Sync updated variables or styles on the fly

Use the Sync button to update your variables with Specify. Now you are ready to export your design tokens! 🎉

Use the sync button to update new variables

6. Check 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.

Did this answer your question?