Figma Variables
In this guide you’ll learn how to sync your Figma Variables to a Specify Repository and how to keep them updated.
How to sync Figma Variables to code through Specify (2min)
To get most out of this guide, you will need:
- A Specify Account
- A Figma file containing Variables
- Access your Figma file which includes the Variables you would like to sync to Specify
- Download ↗ the Specify Widget in the Figma file which includes your Variables. 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.
- 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 in which the widget is added. Watch tutorial ↗
- 2.Click "Connect"
- 3.Choose Local Variables
Note: the widget can be used for syncing Figma Local Styles as well, you are able to switch between the two by clicking "Switch to".
- 1.Go to your Specify workspace
- 2.Click on "Create repository"
- 3.Choose a name
- 4.
- 5.Click "Create repository"
Create a repository in Specify
- 1.Go back to your Figma file that includes the Variables
- 2.Click on "Create Source" in the Specify Widget
- 3.It will show you the collections 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 repositories that can sync Figma Variables are listed here.
Create a source in your Specify Widget in your Figma file
Use the
Sync button to update your variables with Specify. Now you are ready to export your design tokens! 🎉 At this moment in the beta you are only able to sync your Figma Variables through the Specify Widget in your Figma file. We do not offer a token table yet, so within Specify you will only see the categories of tokens that are synced. If there are updates on this topic we will inform you.
Use the sync button to update new variables
- You will see the category of design tokens that are synced on the left hand side
- In the
Sourcessection (left hand menu), you will see your connection(s) and when the last sync between your Figma file and Specify repository has occurred.
Last modified 25d ago