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: