Introduction
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
Addbutton.Now you can open the file you want your widget to be connected to and add it to your canvas the same way.
💡 You can copy/paste the widget frame from file to file, or page to page.
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
Connectbutton.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 andCopy URL.💡 In the desktop app of Figma, you can copy a link to a file simply by hitting
cmd+Lfor Mac orctrl+Lfor Windows.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.
☝️ Even if this Access Token is personal, when the widget is connected, every editor of your Figma file will be able to use the widget and sync the tokens.
How to create a source?
Create a new repository in Specify
Create a source and select either Variables & Styles or Vectors ↗︎.
If you select Variables & Styles, it will detect 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.
FAQ
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.