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, 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.
To learn more about component versions and how to compare changes between them, check out the following articles:
Related articles