How to use the Figma Widget?

This article will help you setup and use the Figma widget with Specify.

Updated over a week ago


Specify Widget helps you:

  1. Sync design tokens and assets from Figma to Specify

  2. See all design tokens and assets in your Figma file that are synced to Specify

  3. 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 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 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 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 Sync button to update or collect new variables or styles. πŸŽ‰

More options

  • Use the Refresh Widget button to be sure to have the last status of the widget.


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.

Did this answer your question?