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 generated by Zeplin from the design file

🔵 Component is in the styleguide

🟢 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. To see the versions of the component in the component's detail view, you can click on the "See Versions" link.

If the selected component is not located in your styleguide and Zeplin detected it from your design file, it’ll show it with a gray color code and informative text when you hover over it.

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

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.

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

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. You can choose those projects from the dropdown to see the screens in the other projects where the selected component is used.

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: Components in Zeplin