Which version of the widget should I choose?
Figma now offers two possibilities for having design tokens. You can either use Local Styles or Local Variables to define some of your design tokens like Colors.
Classic version - Local Styles
Select Use Classic if you collected design tokens or assets from Figma through:
Local Styles
Frames
Pages
Document
Advanced version - Local Variables & Local Styles
Select Use Advanced if you are collecting design tokens from Figma through:
Local Variables
Local Styles
How to use the Specify Widget with an Advanced Repository?
Create a new Advanced repository (accessible only with our Beta Program ↗︎) compatible with Figma variables.
Create a source. It detects all the collections and styles from your current file.
Select the design tokens format you want to collect from your Figma file. Learn More ↗︎
Variables & Styles
Only Variables
Only Styles
Select the Specify repository you want your variables to go to.
Save to synchronize all your Collections and their variables to Specify.
Use the
Syncbutton to update or collect new variables or styles. 🎉
More options
Use the
Refresh Widgetbutton to be sure to have the last status of the widget.Use the
Switch to Classicbutton if you wish to display your sources from the previous type of repositories compatible with Styles and Frames.
How to use the Specify Widget with a Classic Repository?
ℹ️ If you don't have any sources connected to Specify yet, you must first go into the Specify interface and connect one to extract your design tokens and assets from Figma. Find out how here.
The first widget panel
All your design token types that have connections with Specify are listed there.
Click on one to open a second window with your connected pipelines.
Second widget panel
Here are listed all your connected pipelines of a certain token type you selected (ex. Vectors), grouped by Specify repositories.
Update your tokens and synchronize them (colors, text styles, vectors, or assets) right from your Figma file.
Go directly to a frame inside your file by clicking on the
targetbutton.You can open as many token types windows as you like and move them around your page or on other pages.
💡 Tip: Open a token type window (like vectors for example) and move it next to your icons frame. Next time you update your icons, you will be able to sync them directly there.