All Collections
Components in Zeplin
Inspecting a component in the detail view
Inspecting a component in the detail view

Learn how to get a detailed view of a component and inspect it

Didem avatar
Written by Didem
Updated this week

You can inspect a styleguide component in a focused view with its version history, variants, and more details. You can access a component's detail view either from a screen or the components tab of a styleguide.

When inspecting a component, Zeplin will show the component tag, which takes you to the detail view of that component by clicking on it.

You can also use the "See Versions" link in the component box on the right panel to open the detail view.

To access a component detail view from a styleguide, you can double-click on a component from the Component section under the styleguide. You can also click on the "Go to Component Detail" button revealed on the right panel when you select the component in the styleguide.

Component detail view

On the detail view, you'll see the below details on the right panel while seeing the component variants and version history and the Version Diff option on the left panel:

  • Component URL to share

  • Screens it's used in (if it's a local styleguide)

  • Jira ticket details, if any

  • Connected Component/Storybook details, if any

  • Properties

  • Components used in, if there are nested components

  • Assets, if any

You can also click on the component or a layer to inspect it the way you do when inspecting components in a screen.

Once you click on a layer of a component on the detail view, you’ll see more details on the right panel, like:

  • Layer name

  • Layout properties

  • Typeface, colors, and content info

  • Code snippets

Variants

If you've already set up component variants or exported them from a design tool, you can view the other variants of the selected component on the left panel in the component's detail view.

To learn more about Component Variants, check out this collection: Component Variants

Version History

Each version of components you export to Zeplin will be stored separately with commit messages, organized by colors and timestamps.

You can see the version history of a component on the left panel in the component’s detail view and compare changes between the versions by enabling the “Show differences” option. changes between the versions by enabling the “Show differences” option.

To learn more about component versions and how to compare changes between them, check out the following articles:


Related articles

Did this answer your question?