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 out button.
This will open a copied file in your draft and you can test the Widget from here by clicking on the Resources button on the top menu.
A panel opens and you can drag on drop the widget from here or click on the Add button.
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 files to files.

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 Connect button.
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 Share button on the top-right menu and Copy URL.
💡 In the desktop app of Figma, you can copy a link to a file simply by hitting cmd+L for Mac or ctrl+L for 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 member of your team in Figma will be able to use the widget and sync the tokens.

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.

👉 Learn more about Figma Styles and Variables design tokens compatibility

Local Styles

Select Use Styles if you are collecting design tokens or assets from Figma through Local Styles or Frames in Specify.

Local Variables

Select Use Variables if you are collecting design tokens (colors and dimensions) from Figma through Local Variables in Specify.

How to use the Specify Widget with Local Variables?

`SDTF Beta`

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.
Use the Sync button to update or collect new variables.
Use the Refresh Widget button to be sure to have the last status of the widget.
Use the Switch to Styles button 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?

`Classic Version`

ℹ️ If you don't have any sources connected to Specify yet, you will need to 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 target button.
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.

FAQ

Why my sources are not up to date?

The widget won't refresh its interface by itself. You need to click on Refresh Widget on each widget frame opened to be sure your information is up to date.
You can also click on the Sync button 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.