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

When you hover over a layer on a screen, Zeplin indicates if a layer is a component or part of a component. It also shows the width and height values of the component layer on top of it when you click on the layer.

Here are the color codes for the components:

🔵 Component is in the styleguide

⚫️ Component is Zeplin-generated from the design file

🟢 Component is linked to code

🔴 Component's link to code is broken

Zeplin also indicates nested components with color-coded inspect lines. When you click on a layer that's part of a component, Zeplin draws:

You can also see padding and gap values for components with auto layout settings — select a component and hover over the gaps and padding.

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

In the Component box, you'll see the component name and last uploaded time under the component name. To see the versions of the component in the component's detail view, you can click on the "See Versions" button.

You'll see the same color codes next to the styleguide information in the Component box. If it is a component in your styleguide, you'll see the styleguide name with a blue dot. The dot's color will be green if the component is also linked to code/Storybook. If the link to code/Storybook is broken, the color will be red.

💁‍♀️ When you click on the styleguide info in the Component box, 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, you'll see the design file info with a gray dot and ⓘ icon to show informative text about the component.

If the component you selected has been set as a component variant, you'll 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, these 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 linked with the property.

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

You'll see the number of "used in" screens in the Component box, 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 where 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 similar components by detecting them from their names if they have any naming convention.

If the component you selected on a screen is linked to a component in code or a story in Storybook, Zeplin shows this information within the Component box. This way, developers can access the components in their codebase while inspecting 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: