Search

Inspect design uploads

Brienne Wong
Brienne Wong
  • Updated

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.

Component hovered over to show the inspect mode option.

Clicking on the inspect will take you to the inspect page, where you can view the associated styles and attributes.

Inspect page for a button component

 

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.

Color picker in the Choose background color function for Inspect mode

Linked components

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

Inspect mode shows linked components for a navbar.

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.

 

FAQs

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. 

My design items from Figma are skewed in Inspect mode

You will need to turn off Clip content in Figma. Otherwise, Figma does not let us see the size of the frame, including the elements that go outside of the frame.

Figma design panel

 

Was this article helpful?