All Collections
Legacy Repositories
Collect design tokens
Which version of the widget should I choose?
Which version of the widget should I choose?

As you are both navigating with our legacy repositories and our Advanced new repositories, here's how to understand it when using the widget

Updated over a week ago

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 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 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.

  • Use the Switch to Classic 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 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 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.

Did this answer your question?