Tokens Studio for Figma
  • Getting Started
    • Tokens Studio Plugin for Figma
    • Install the Figma Plugin
    • Pro Licence for the Figma Plugin
    • Join the Slack Community
    • Feature Requests - Featurebase
    • Changelog - Featurebase
  • Design Token Fundamentals
    • Intro to Design Tokens
      • Token Anatomy - Type
      • Token Anatomy - Value
      • Token Anatomy - Description
      • Token Anatomy - Name
  • Token Management
    • Token Types
      • Asset
      • Boolean
      • Border - Composite
      • Box Shadow - Composite
      • Color
        • Modified Colors (pro)
        • Gradient Colors
      • Dimension
        • Border Radius
        • Border Width
        • Sizing
        • Spacing
      • Number
      • Opacity
      • Other
      • Text (string)
      • Typography - Composite
        • Font Family
        • Font Weight
        • Font Fallbacks
        • Font Size
        • Line Height
        • Letter Spacing
        • Paragraph Indent
        • Paragraph Spacing
        • Text Case
        • Text Decoration
      • Composition (legacy)
    • Token Values
      • Token Values with References
      • Using Math in Token Values
    • Token Names
      • Token Name Technical Specs
      • Token Groups
      • Edit Token Names
    • Token Description
    • Token Sets
      • JSON View
  • Themes management
    • Themes (pro)
    • Themes that switch
  • Working in Figma
    • Variables and Tokens Studio
    • Styles and Tokens Studio
    • Export to Figma Guide
      • Export Options
      • Export Using Themes (pro)
      • Export Using Token Sets
      • Variables Skipped on Export
      • Styles with Variable References
    • Import from Figma Guide
      • Import Styles from Figma
      • Import Variables from Figma
        • Connect Themes to Imported Variables
        • Imported Variable Types and Token Types
    • Non-local Variables and Styles (pro)
    • Remove Tokens from Figma elements
    • Dev Mode in Figma
  • Settings Management
    • Plugin Settings
    • Base Font Size Setting
    • Token Format - W3C DTCG vs Legacy
  • Token Storage and Sync Integrations
    • Local Document - Figma File Token Storage
    • Remote Token Storage Integrations
      • GitHub - Git Sync Provider
      • GitLab - Git Sync Provider
      • Bitbucket - Git Sync Provider
      • Azure DevOps - Git Sync Provider
      • JSONBin - Cloud Sync Provider
      • Supernova - Cloud Sync Provider
      • Tokens Studio Platform - Cloud Sync Provider
      • URL - Server Sync Provider
      • Generic Versioned Storage - Server Sync Provider
    • Multi-file Sync to Remote Storage (pro)
    • Manage Sync Providers
      • Edit Sync Provider
      • Change Active Sync Provider
      • Remove Sync Provider
    • Sync Changes to Remote Storage - Push and Pull
    • Branch Switching (pro) - Version Control
  • Inspect and Debug Tokens
    • Inspect Tokens
    • Remap Tokens
  • Transform Tokens for Development
    • Style Dictionary + SD Transforms
    • Official docs for Style Dictionary
  • Style Dictionary Playground
  • Troubleshooting
    • Reset Tokens from Dev Console
    • Tokens Studio Status
  • Open Source
    • Contribute
    • Shared Plugin Data
Powered by GitBook
On this page
  • Dev Mode in Figma
  • Add Tokens Studio to Dev Mode
  • Viewing Tokens Studio Data in Dev Mode
  • Resources

Was this helpful?

Edit on GitHub
Export as PDF
PreviousRemove Tokens from Figma elementsNextPlugin Settings

Last updated 23 days ago

Was this helpful?

Dev Mode in Figma

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

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.

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

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.

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.

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.

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.

Resources

Mentioned in this guide:

Community resources:

  • None yet!

Known issues and bugs

Requests, roadmap and changelog

Figma Learn -

Tokens Studio Plugin GitHub -

Enhance data in Dev Mode -

Guide to Dev Mode
Open issues for Figma Dev Mode
Feature Request
Dev Mode
→ Read Figma's guide on Dev Mode for more details on this feature and their licence requirements.

💡 Something to share?

💡 Something to share?

🐞 If you are experiencing an issue not listed here, please reach out to us on the Troubleshooting channel of our , , or send us an email support@tokens.studio

Submit it here!
Submit it here!
community Slack
submit it on our feedback tool
A Figma file shows the Dev Mode button annotated at the bottom center of the screenshot.
A Figma file in Dev Mode is shown with the Plugin Tab annotated at the top right of the screenshot.
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.
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.
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.
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.
Page cover image