Table of content
Specify Widget helps you:
Sync design tokens and assets from Figma to Specify
See all design tokens and assets in your Figma file that are synced to Specify
Create sources and collect Figma Variables into Specify
Here's a quick tour of how to use it:
How to install the Widget?
Go to the Figma Community page of the Widget and click on the
Try it outbutton.
This will open a copied file in your draft and you can test the Widget from here by clicking on the
Resourcesbutton on the top menu.
A panel opens and you can drag on drop the widget from here or click on the
Now you can open the file you want your widget to be connected to and add it to your canvas the same way.
How to connect my Widget to Specify?
Once you've added your Widget in the canvas of the file you want to monitor. You can connect it to Specify to fetch all the sources you connected to Specify.
Click on the
The widget is dependent on a Figma file, to know which file to detect and display the Specify sources connections of this file, you will need to add the URL of the Figma file to connect. You can do that by clicking on the
Sharebutton on the top-right menu and
You will also need a Personal Access Token. You can create one in your Specify settings > Access Tokens.
We recommend that you name it "widget" to remember what it is for and save this key as it won't be displayed in the Specify interface anymore and you might need it to connect other Figma files. If you prefer not to save it somewhere, you can always create as many Personal Access Tokens as you need for each connection between your Figma files and Specify.
What are Styles and Variables?
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.
Use Stylesif you are collecting design tokens or assets from Figma through Local Styles or Frames in Specify.
Use Variablesif you are collecting design tokens (colors and dimensions) from Figma through Local Variables in Specify.
How to use the Specify Widget with Local Variables?
Create a new type repository (accessible only with our Beta Program ↗︎) compatible with Figma variables.
Create a source. It detects all the collections from your current file and the repositories compatible with Figma variables.
Select the Specify repository you want your variables to go to.
Save to synchronize all your Collections and their variables to Specify.
Syncbutton to update or collect new variables.
Refresh Widgetbutton to be sure to have the last status of the widget.
Switch to Stylesbutton 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 Local Styles?
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
You can open as many token types windows as you like and move them around your page or on other pages.
Why my sources are not up to date?
The widget won't refresh its interface by itself. You need to click on
Refresh Widgeton each widget frame opened to be sure your information is up to date.
You can also click on the
Syncbutton to synchronize your design tokens and assets. This will also refresh the widget.
What are pipelines?
A pipeline is a connection between a source (like a Figma file) and Specify or between Specify and a destination (like GitHub or Notion). The Figma widget displays all the source pipelines already connected to Specify.
What does the button "disconnect" do?
When you disconnect from a panel of the widget, it will only disconnect this panel and you won't be able to see your connected pipelines anymore. Other widget panels or other Specify widgets in other files won't be disconnected and will work normally.