All Collections
Components in Zeplin
Inspecting components in a screen
Inspecting components in a screen

Learn how to inspect your components in a screen

Tuba avatar
Written by Tuba
Updated over a week ago

When you add components to your artboards/frames and publish them into Zeplin, you can access the details of your components on the right panel while inspecting your screens.

When you select a component on your screen, Zeplin displays the Component box as dark gray on the right panel. This Component box contains the details like;

  • component name

  • properties

  • component location — if it is located in your styleguide or if Zeplin detected it from your design file

  • the number of “Used in” screens across all the projects that the workspace has

  • if it is connected to code/Storybook

Component name & location

If it is a component located in your styleguide, you'll see the styleguide name with a blue dot under your component name. The dot's color will be green if the component is also linked to code/Storybook.

🔵 Component is in the styleguide

🟢 Component is linked to code

When you click on the arrow icon next to the component name, the selected component will be opened within the styleguide.

If the selected component is not located in your styleguide and Zeplin detected it from your design file over the export process, you'll see the design file info with a gray dot and ⓘ icon to show an informative text about the component.

⚫️ Component Zeplin-generated from the design file

Properties

If the component you selected has been set as a component variant, you can see its variant properties on the right panel.

To learn more about Component Variants in Zeplin, check out this article.

If you exported designs from Figma with Component Properties, those properties will also be listed on the right panel. When you hover over a component property on the right panel, Zeplin will highlight the layers that are linked with the property.

“Used in” screens

When you select a component on your screen, you’ll be able to see a list of other screens where that component is also used in — within a project and across other projects in the workspace.

You’ll see the number of “used in” screens in the Component box first, and when you click on the arrow button there, Zeplin will list all the screens in the current project that the selected component is used. You can directly navigate to those screens by clicking on them. To see the screens in the other projects that the selected component is used, you can choose those projects from the dropdown.

Zeplin also shows when component variants are detected in other screens. You can directly change the properties from the right panel to see the screens where the other component variants are used in.

If there are no designated variants for the selected component, Zeplin shows the similar components by detecting them from their names if they have any naming convention.

Connected component

If the component you selected on a screen is already linked to a component in code or a story in Storybook, Zeplin shows this information within the Component box. This way, developers can access components in their codebase right on the designs.

You can learn more about how to connect components to code and how Zeplin’s Storybook integration works from the following links:

If you want to learn more about how Components work in Zeplin, check out this collection link:

Did this answer your question?