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.

→ Read Figma's guide on selecting layers and objects for more details.

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.

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

1. Inspect Controls

2. Token Actions

3. Token List

The Inspect page of the Plugin is shown with its controls annotated with numbers that match the sections mentioned above.

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

B. Deep Inspect

C. Inspect Options

D. Token View Toggle

The Inspect page of the Plugin is shown with its controls annotated with letters that match their detailed descriptions below.

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.

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.

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

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.

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.

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.

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.

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.

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.

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 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. → Jump to the guide on Documentation Tokens for more details.

---

2. Token Actions

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

A. Select All

B. Bulk Remap

C. Set to None

D. Remove Selected

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.

The Inspect page of the Plugin is shown with the Token Actions annotated with letters that match their detailed descriptions below.

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.

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.

B. Bulk Remap

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 remapped to after editing a Token's name.

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.

→ Jump to the Remap Tokens guide for more details.

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.

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.

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.

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.

Selecting the Remove selected button on the Inspect page of the Plugin will remove the Tokens with a checkmark next to them.

Limitations of removing Tokens

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

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.

Remove Tokens from Figma elements

---

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:

A. Design Property

B. Select Token Control

C. Value Preview

D. Token Application Symbol

E. Token Name

F. Figma Layer Actions

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.

The Inspect page of the Plugin is shown with the Token List features annotated with letters that match their detailed descriptions below.

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.

An example of the Inspect page of the Plugin shows a long list of Tokens with the design properties they were applied to highlighted.

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	Asset
backgroundBlur	Background blur	Dimension
border	Border all sides	Border
borderBottom	Bottom border only	Border
borderColor	Border/stroke color	Color
borderLeft	Left border properties	Border
borderRadius	Border radius (all corners)	Dimension, Border Radius
borderRadiusBottomLeft	Bottom-left border radius	Dimension, Border Radius
borderRadiusBottomRight	Bottom-right border radius	Dimension, Border Radius
borderRadiusTopLeft	Top-left border radius	Dimension, Border Radius
borderRadiusTopRight	Top-right border radius	Dimension, Border Radius
borderRight	Right border properties	Border
borderTop	Top border properties	Border
borderWidth	Border width	Dimension, Border Width
borderWidthBottom	Bottom border width	Dimension, Border Width
borderWidthLeft	Left border width	Dimension, Border Width
borderWidthRight	Right border width	Dimension, Border Width
borderWidthTop	Top border width	Dimension, Border Width
boxShadow	Box shadow	BoxShadow
composition	Composition (legacy)	Composition
counterAxisSpacing	Row gap	Dimension, Spacing, Number
description	Token description	Documentation Tokens
dimension	Dimension without property specified	Dimension
fill	Fill color	Color
height	Height	Dimension, Sizing, Number
horizontalPadding	Horizontal padding	Dimension, Sizing, Number
itemSpacing	Spacing between items	Dimension, Sizing, Number
maxHeight	Maximum height	Dimension, Sizing, Number
maxWidth	Maximum width	Dimension, Sizing, Number
minHeight	Minimum height	Dimension, Sizing, Number
minWidth	Minimum width	Dimension, Sizing, Number
number	Number without property specified	Number
opacity	Opacity/transparency	Opacity
paddingBottom	Bottom padding	Dimension, Spacing, Number
paddingLeft	Left padding	Dimension, Spacing, Number
paddingRight	Right padding	Dimension, Spacing, Number
paddingTop	Top padding	Dimension, Spacing, Number
rotation	Rotation	Number
sizing	Size (width and height)	Dimension, Sizing, Number
spacing	General spacing	Dimension, Spacing, Number
text	String text content	Text
textDecoration	Text decoration	Text Decoration
tokenName	Token name	Documentation Token
tokenValue	Token raw value	Documentation Token
typography	Typography Composite	Typography
verticalPadding	Vertical padding	Dimension, Spacing, Number
value	Token resolved value	Documentation Token
visibility	Visibility state	Boolean
width	Width	Dimension, Sizing, Number
x	X position	Dimension, Number
y	Y position	Dimension, Number

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.

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

C. Value Preview

Each Token Type will preview the Resolved Value 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 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).

• 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 (↑ more details above).

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

An example of the Inspect page of the Plugin highlights the Token Values for several different Token Types described above.

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.

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.

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.

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 (described below ↓).

→ Jump to the Remap Tokens guide for more details.

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.

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.

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.

---

Resources

Mentioned in this doc:

• Figma Learn - Select layers and objects

Community resources:

• None yet!

💡 Something to share? Submit it here!

Known issues and bugs

Tokens Studio Plugin GitHub - Open issues for Inspect

Tokens Studio Plugin GitHub - Open issues for Deep Inspect

🐞 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

• None yet.

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