With the inspect tool, you can inspect your artboards and components in both editor and viewer modes, allowing you to see the styles and attributes that make up these items.
Inspect artboards and components
When hovering over an artboard or component, you will see the option to Inspect with a magnifying glass icon.
Clicking on the inspect will take you to the inspect page, where you can view the associated styles and attributes.
Change background color
You can customize the background color for components in the Inspect view. The background for all components is now transparent by default unless you apply a color background from the design uploads block and toggle on Use as background in Inspect.
👉 Note: This functionality works with our Sketch plugin. You will need to resync your Figma file to view linked components. This functionality is currently not available for Adobe XD.
You can see how your components are linked when you inspect your uploads. The panels on the right-hand side will show you:
- A list of components where your current component is used.
- A list of components that your current component has in it.
The panel is hidden if either list is empty. Linked components are highlighted when you hover over the design layers.
When you select a linked component, you can click through to go directly to the inspect view for that component if it already exists in your styleguide.
I cannot inspect my design items.
Check in the design block settings that the 'Disable inspecting items' toggle has been switched off. If this is on, please contact us.
I'm not able to inspect color styles or text styles.
The inspect tool only works for artboards and components; however, you're able to inspect any color styles or text styles that are used within these two design items.
Is it possible to see multiple layers on a component in the inspect mode instead of showing just one?
At the moment, we don’t support inspecting multiple layers. We can only display the style that appears first in the design tools panel layer.