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.
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:
B. Deep Inspect
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.
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.
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:
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.
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:
A. Select All
B. Bulk Remap
C. Set to None
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
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:
Match - the string you'd like the Plugin to find.
Replace - the new string that will replace all instances the Plugin finds that match.
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.
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 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 elements3. 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:
E. Token Name
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.
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
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).
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.
Applied with Tokens Studio - no symbol
Applied as a Figma Style - 2 x 2 dots
Applied as a Figma Variable - Hexagon
Broken Token - Chain link with line through it.
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.
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.
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:
Layer count - the number of layers the Token is applied to
Selecting the layer count will open a list of the layer names.
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:
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.
Last updated
Was this helpful?