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
      • Figma Data Limits
    • 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
  • Inspect Tokens in the Plugin
  • 1. Inspect Controls
  • 2. Token Actions
  • 3. Token List
  • Resources

Was this helpful?

Edit on GitHub
Export as PDF
PreviousBranch Switching (pro) - Version ControlNextRemap Tokens

Last updated 26 days ago

Was this helpful?

Inspect Tokens in the Plugin

The Inspect page of the Plugin is where you can see which Tokens have been applied to a selected design element in Figma and modify the Tokens as needed.

The way this page appears changes based on the elements you have currently selected on the Figma canvas.

→

There are three main sections on the Inspect Page visible when a design element is selected in Figma:

1. Inspect Controls

The actions at the top of the Inspect Page control how the Plugin displays the Tokens being inspected below it:

A. Token Name Search

When you type in the search input, only the Design Tokens with names that match will appear in the Token list below.

Like the search feature on the Tokens Page, the results are limited to Token Name. The Token Type and names references in values are not included in the search.

If you select another design element in Figma before clearing the search input, the Plugin will only display Token names that match your search. This can help speed up workflows where you are looking for specific Tokens across designs in your Figma file.

B. Deep Inspect

The Deep Inspect feature controls how many layers of your selected Figma element are being looked at by the Plugin.

  • Deep Inspect Off - empty checkbox

    • Currently selected layer is being inspected.

    • Only Tokens applied directly to the current layer appear in the Token list below.

Deep Inspect On- checkmark visible

  • Current layer and all children layers below are being inspected.

  • All Tokens applied to the current layer and children layers appear in the Token list below.

The Deep Inspect feature in the Plugin is the only way to see all Tokens applied to a design element at once. Figma's native features in Dev Mode or their Inspect views only shows the current selected layer and ignore all children layers.

Icons tend to be tricky with layers!

Color Tokens applied to style the vector path are always applied to the children layers, and when selecting the parent container without deep inspect enabled you might miss them! This is a common complaint in Dev Mode in Figma as well to be aware of!

C. Inspect Options

The Inspect Options menu contains some handy filters if you are working with design elements in Figma with lots of Tokens applied to them:

  1. Show broken references

    • Controls visibility of Tokens applied that have an issue blocking the Plugin from resolving the value of the Token correctly.

    • Most often there is an issue with the Token Name not being found in the plugin, or the value of the Token has an error.

  2. Show resolved references

    • Controls visibility of Tokens applied with no issues detected by the Plugin.

For example you are only checking for Broken Tokens, you could deselect the show resolved referencesoption so the checkmark is not visible. That way any layers you are inspecting in the Plugin will only show Tokens with broken references in the list below so you can find what you are looking for faster.

D. Token View Toggle

Much like on the Tokens page of the Plugin, the Tokens View toggle allows you to switch between the no-code (list) and code (debug) views.

By default, the Inspect page is on the List view. You can select the iicon button to toggle to the debug view.

Debug and Annotate

When you are inspecting a selected layer in the Plugin from the Debug View, you will see all Tokens applied to the layer written in code.

You can also select one of the arrows to create a static annotation element next to the selected layer in the Figma file. The annotation element will include the names of all Tokens applied to the selected layer and an arrow indicating which layer the annotation belongs to.

For example, selecting the arrow pointing down will place the annotation element underneath the design element on the Figma canvas.


2. Token Actions

These actions allow you to interact with the Tokens listed below them:

You can perform bulk actions on more than on design element in Figma! Simply select everything in your design that you want the Plugin to inspect at the same time.

A. Select All

The Select All feature controls the Tokens listed below it:

  • Select All Off - empty checkbox

    • Individual Tokens below it can be selected as required.

Select All On- checkmark visible

  • All Tokens below it will be selected with their checkmarks visible.

B. Bulk Remap

The Bulk Remap modal allows you to match and replace strings of Token Names using the inputs:

  1. Match - the string you'd like the Plugin to find.

  2. Replace - the new string that will replace all instances the Plugin finds that match.

  3. Remap across document (slow) - tells the Plugin to expand the action across the entire Figma file instead of limiting it to the currently selected design elements.

Once you've filled out the inputs with your desired strings, be sure to select the Remap button to save your changes.

Once you are finished Remapping all desired Tokens, you'll need to navigate back to the Tokens Page and select the Apply Token Data button to push the new values to Figma to complete the process.

C. Set to None

Selecting the Set to None feature was developed for working with instances of components in Figma.

You can not remove a Token from an instance of a component due to the way that components work in Figma. If you apply another Token, Style or Variable to the same property as an over-ride, when the Plugin runs the value of the Token applied to the main component will be applied, effectively erasing your styling over ride. So to get around this limitation, you can use the Set to None feature which tells the plugin to change the value of the Token to none without removing it. When the value is none , you can style that property with another Token, Style or Variable in Figma. When the Plugin runs in the future, your over-ride will persist.

D. Remove Selected

The Remove Selected button allows you to remove Tokens that are listed below with the checkmark visible from your chosen design elements on the Figma canvas.

Limitations of removing Tokens

The Plugin can not remove Variables or Styles applied to design elements with Figma's native features.

There are also some nuances of removing Tokens from the Inspect or Tokens Page of the Plugin to be aware of, which are described in detail in the Remove Tokens guide.


3. Token List

Once you've selected a design element in Figma, the Tokens applied are listed in the Plugin. Each Token Type will appear in the list with slight differences, but all Tokens in the list share the same anatomy:

It's important to remember that the controls and actions above the Token List influence which Tokens you will see for the currently selected design element on the Figma canvas.

A. Design Property

The Tokens in the list are organized by the design property they have been applied to for the selected elements on the Figma canvas.

The design property appears as the heading of the Tokens listed below it.

The names of the design properties displayed on the inspect page don't always match the design properties displayed when you right click on a Token to apply it to a design element. Here's a list of the design properties you'll see on inspect page and the corresponding Token Type. You can select the Token Type to jump to its guide.

Design Property
Common Name
Token Types

asset

Assets/images

backgroundBlur

Background blur

border

Border all sides

borderBottom

Bottom border only

borderColor

Border/stroke color

borderLeft

Left border properties

borderRadius

Border radius (all corners)

borderRadiusBottomLeft

Bottom-left border radius

borderRadiusBottomRight

Bottom-right border radius

borderRadiusTopLeft

Top-left border radius

borderRadiusTopRight

Top-right border radius

borderRight

Right border properties

borderTop

Top border properties

borderWidth

Border width

borderWidthBottom

Bottom border width

borderWidthLeft

Left border width

borderWidthRight

Right border width

borderWidthTop

Top border width

boxShadow

Box shadow

composition

Composition (legacy)

counterAxisSpacing

Row gap

description

Token description

dimension

Dimension without property specified

fill

Fill color

height

Height

horizontalPadding

Horizontal padding

itemSpacing

Spacing between items

maxHeight

Maximum height

maxWidth

Maximum width

minHeight

Minimum height

minWidth

Minimum width

number

Number without property specified

opacity

Opacity/transparency

paddingBottom

Bottom padding

paddingLeft

Left padding

paddingRight

Right padding

paddingTop

Top padding

rotation

Rotation

sizing

Size (width and height)

spacing

General spacing

text

String text content

textDecoration

Text decoration

tokenName

Token name

tokenValue

Token raw value

typography

Typography Composite

verticalPadding

Vertical padding

value

Token resolved value

visibility

Visibility state

width

Width

x

X position

y

Y position

B. Select Token

The Select Token control allows the bulk actions above the list to be applied to the Token:

  • Empty checkbox

    • This Token will be skipped from bulk actions.

  • Checkmark visible

    • Bulk actions will be applied to this Token.

C. Value Preview

  • When a Token is "broken" and it's value can not be resolved, the value will be replaced with an icon of a broken link (↓ more details below).

Known Issue When values are long, sometimes the UI preview will appear visually broken or cut off.

D. Token Application Symbol

The Plugin will display a symbol next to the Token Name to indicate how it was applied to the design element.

  1. Applied with Tokens Studio - no symbol

  2. Applied as a Figma Style - 2 x 2 dots

  3. Applied as a Figma Variable - Hexagon

  4. Broken Token - Chain link with line through it.

  5. Value Set to None - Circle with a line through it.

E. Token Name

The Token Name that Figma is using as the ID of the design decision will show in the list. If the Token was applied using the Plugin directly, you can select the chevron to the right of the name to access the Remap feature.

F. Figma Layer Actions

The actions on the right side of the Token list interact with the layers within your selected design elements in Figma. These actions allow for fine-grained control of selecting the correct layers when debugging Tokens that are broken or require remapping:

  1. Layer count - the number of layers the Token is applied to

    1. Selecting the layer count will open a list of the layer names.

  2. Layer navigation - will change the Plugin's current selected layers to the layers listed in the count to the left.


Resources

Mentioned in this doc:

Community resources:

  • None yet!

Known issues and bugs

Requests, roadmap and changelog

  • None yet.

A.

B.

C.

D.

The annotations generated are static, acting like a snapshot in time. You can manually apply a Documentation Token if you want the annotations to change if the Token Names change in the future. →

A.

B.

C.

D.

Selecting the Bulk Remap button allows you to use a match and replace feature to update the names of multiple Tokens applied to design elements in your Figma file. This is helpful in fixing broken Tokens that were not .

→

The Plugin can not remove Tokens from instances of components. You'll need to use the Set to None feature instead ().

A.

B.

C.

D.

E.

F.

,

,

,

,

,

,

,

,

,

,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

, ,

,

,

Each Token Type will preview the of the Token in a slightly different way. For example, Color Tokens display a swatch of the color, where as a Dimension Token shows the numeric value.

When the Value has been Set to None using the bulk action, the value will be replaced with an icon of a circle with a line through it ().

If you use the remap feature it will only apply the changes to the design elements on the Figma Canvas that are currently selected. You can use the actions to the right of the Token Name to check which layers are selected ().

→

Figma Learn -

Tokens Studio Plugin GitHub -

Tokens Studio Plugin GitHub -

Jump to the guide on Documentation Tokens for more details.
Jump to the Remap Tokens guide for more details.
Remove Tokens from Figma elements
Jump to the Remap Tokens guide for more details.
Select layers and objects
Open issues for Inspect
Open issues for Deep Inspect
Inspect Controls
Token Actions
Token List
Token Name Search
Deep Inspect
Inspect Options
Token View Toggle
Select All
Bulk Remap
Set to None
Remove Selected
↑ described above
Design Property
Select Token Control
Value Preview
Token Application Symbol
Token Name
Figma Layer Actions
↑ more details above
described below ↓
Asset
BoxShadow
Composition
Text
Text Decoration
Typography
remapped to after editing a Token's name
Resolved Value
Read Figma's guide on selecting layers and objects for more details.

🐞 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

💌 Visit to contribute or subscribe to updates.

💡 Something to share?

community Slack
submit it on our feedback tool
Submit it here!
https://feedback.tokens.studio/
The left side example shows how the Inspect page looks before selecting a Figma design element compared with the right side example, showing many Tokens applied to a selected layer in Figma.
The Inspect page of the Plugin is shown with its controls annotated with numbers that match the sections mentioned above.
The Inspect page of the Plugin is shown with its controls annotated with letters that match their detailed descriptions below.
The left example of the Inspect page of the Plugin shows a list of Tokens. The example on the right shows how entering in the search term "col" filters the Tokens listed below it to only those with that exact string in the Token Name.
The example on the left shows the Inspect page of the plugin with the Deep Inspect feature disabled (no checkmark) and a single Token listed below. The example on the right shows the Deep Inspect feature enabled (checkmark visible) and 4 Tokens listed below.
The example on the left shows the Inspect page of the plugin with a list of Tokens below, which includes a broken Token. The example on the right shows the Inspect Options menu open with the "show broken references" disabled (no checkmark), and the list of Tokens below does not include any broken Tokens.
The example on the left shows the Inspect page of the plugin with a list of Tokens below, which includes a broken Token. The example on the right shows the Inspect Options menu open with the "show resolved references" disabled (no checkmark), and the list of Tokens below only shows the broken Token.
With a card element selected in the Figma canvas in the middle, the Plugin screenshot on the left shows the Inspect page as the List view. The screenshot on the right shows the Inspect page in debug view. The controls to toggle between views are annotated.
With a card element selected in the Figma canvas on the lift, the Plugin screenshot on the right shows the Inspect page in the debug view. The controls to Add as an annotation on the bottom are highlighted to show the output from the plugin for the selected card element.
The Inspect page of the Plugin is shown with the Token Actions annotated with letters that match their detailed descriptions below.
The left screenshot of the Inspect page of the plugin shows the Select all control as disabled (no checkmark), and one of the Tokens listed below has a checkmark visible. The example on the right shows how enabling the Select All control will change all Tokens listed below to have a checkmark visible next to their name.
Selecting the Bulk Remap button on the Inspect page of the Plugin will open the Bulk Remap modal, pictured on the right, with numeric annotations to match the inputs described above.
Selecting the Set to none button on the Inspect page of the Plugin will change the value of the selected Token to "none" as pictured on the right.
Selecting the Remove selected button on the Inspect page of the Plugin will remove the Tokens with a checkmark next to them.
The Inspect page of the Plugin is shown with the Token List features annotated with letters that match their detailed descriptions below.
An example of the Inspect page of the Plugin shows a long list of Tokens with the design properties they were applied to highlighted.
An example of the Inspect page of the Plugin highlights the Bulk Actions after a Token in the list below has been enabled (checkmark visible).
An example of the Inspect page of the Plugin highlights the Token Values for several different Token Types described above.
An example of the Inspect page of the Plugin highlights the symbols for how Tokens were applied to the selected design element as described above.
An example of the Inspect page of the Plugin shows how to open the remap feature by selecting the chevron next to the Name of a Token in the list.
An example of the Inspect page of the Plugin shows the Figma Layer features. On the left, the layer selected feature is highlighted. On the right, the layer count is highlighted with an example showing a specific Figma layer name when the count is selected.
Page cover image
Border
Border
Border
Border
Border
Border Width
Border Width
Border Width
Border Width
Border Width
Border Radius
Border Radius
Border Radius
Border Radius
Border Radius
Spacing
Spacing
Spacing
Spacing
Spacing
Spacing
Spacing
Documentation Tokens
Documentation Token
Documentation Token
Documentation Token
Boolean
Number
Number
Opacity
Number
Number
Sizing
Number
Sizing
Number
Sizing
Number
Sizing
Number
Sizing
Number
Sizing
Number
Sizing
Number
Number
Number
Number
Number
Sizing
Number
Number
Number
Sizing
Number
Number
Color
Color
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension
Dimension