Dev mode

Dev mode

Tokens Studio for Figma is integrated with Figma's Dev Mode, allowing developers to see the names of Tokens applied to your layers.

Installation

NOTE: You can only access dev mode for Tokens Studio by toggling on Figma's Dev mode.

Toggling On Dev Mode in Figma

When in Figma's dev mode, search for Tokens Studio for Figma in the Plugins tab, and click on save.

Saving Tokens Studio for Figma Plugin in Dev mode

In the inspect tab, you can then change it from CSS to Tokens Studio for Figma under the Language dropdown menu.

Selecting Tokens Studio for Figma Plugin as Language in Dev mode

Using Dev mode

Click on a layer of your element to see the tokens that are applied.

Using Dev mode to Inspect Tokens

You can see the names of all tokens applied to the element which are displayed in the Inspect panel.

Tokens Displayed in Inspect Panel