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

Learn how to inspect your components in a screen

Didem avatar
Written by Didem
Updated this week

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:

  • Orange solid lines for its parent layer

  • Blue (green if it’s connected to code) solid lines for the component they're in

  • Orange dashed lines for its parent components

  • Blue dashed lines for its first-level child components

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

Viewing component details on the right panel

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

  • Component name

  • Component location β€” if it is located in your styleguide or if Zeplin detected it from your design file

  • Last uploaded time

  • "See Versions" button

  • Properties

  • The number of "Used in" screens across all the projects that the workspace has

  • If it is connected to code/Storybook

Component name & location

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.

πŸ’β€β™€οΈ 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, it’ll show it with a gray color code and informative text when you hover over it.

Properties

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.

"Used in" screens

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.

Connected component

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

Did this answer your question?