Page cover image

Dev Mode in Figma

Tokens Studio for Figma is integrated with Figma's Dev Mode, allowing developers to view and copy the names of Design Tokens applied with the Tokens Studio Plugin.

→ Read Figma's guide on Dev Mode for more details on this feature and their licence requirements.

Once the Plugin is connected to your Dev Mode account, you can select Tokens Studio as a programming language option to view the data from the Plugin attached to the layers you are currently inspecting in Dev Mode.

This setting is saved to your Figma user account.

This means each person on your team using Dev Mode will need to enable the Plugin from their individual Figma account.

Add Tokens Studio to Dev Mode

From any Figma file, toggle to Dev Mode using the action at the bottom toolbar or use the keyboard shortcut shift + D.

A Figma file shows the Dev Mode button annotated at the bottom center of the screenshot.

From the Dev Mode panel, select the plugin tab on the top right of the Figma UI.

A Figma file in Dev Mode is shown with the Plugin Tab annotated at the top right of the screenshot.

Use the search feature (underneath the Plugin tab) to look for Tokens Studio for Figma.

Select the icon button with the ribbon symbol on the right side of the Plugin name to save it to your Figma account.

A Figma file in Dev Mode is shown with the Plugin Tab annotated at the top right of the screenshot. The words "tokens studio for figma" are entered in the search input, and the ribbon symbol icon button with the label "save" is annotated.

Viewing Tokens Studio Data in Dev Mode

Once the Plugin has been saved to your Dev Mode account, you can view Design Tokens applied to design elements by the Tokens Studio Plugin.

From any Figma file, toggle to Dev Mode using the action at the bottom toolbar or use the keyboard shortcut shift + D.

  • Navigate to the Inspect Tab in Dev Mode.

  • Find the Programming Language selector and choose Tokens Studio.

A Figma file in Dev Mode is shown with on the Inspect Tab, located at the top right of the screenshot. The programming language select input is open, with Tokens Studio for Figma as the new option is highlighted.

On the Figma canvas, select the specific layer you'd like to view.

The names of any Tokens applied to that layer with the plugin will appear in the Dev Mode panel where code is displayed.

Figma can only show Tokens applied to one layer at a time. To view any Tokens applied to children layers, you need to select those layers individually.

A Figma file in Dev Mode is shown with on the Inspect Tab, located at the top right of the screenshot. The programming language is set to Tokens Studio for Figma. A card component has been selected on the Figma canvas, and several design token names appear next to the properties in the code display pannel on the right of the interface.

If desired, you can use Figma's copy button to capture all Token Names appearing in Dev Mode to your clipboard to you can paste them elsewhere.

A Figma file in Dev Mode is shown with on the Inspect Tab, located at the top right of the screenshot. The programming language is set to Tokens Studio for Figma. A card component has been selected on the Figma canvas, and several design token names appear next to the properties in the code display pannel on the right of the interface. The copy code action is annotated.

A community plugin was created by Azmy Hanifa which allows you to see more Tokens in Dev Mode! → Tokens Studio Tree Inspector

Resources

Mentioned in this guide:

Community resources:

💡 Something to share? Submit it here!

Known issues and bugs

Tokens Studio Plugin GitHub - Open issues for Figma Dev Mode

🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our community Slack, submit it on our feedback tool, or send us an email [email protected]

Requests, roadmap and changelog

💌 Visit https://feedback.tokens.studio/ to contribute or subscribe to updates.

PreviousRemove Tokens from Figma elementsNextPlugin Settings

Last updated

Was this helpful?