All Collections
Components in Zeplin
Highlighting components in screens
Highlighting components in screens

Learn how to highlight components in a screen

Okan avatar
Written by Okan
Updated over a week ago

Zeplin can now highlight components across screens of a project and show a list of them per screen!

To highlight all the components on a screen, you can select the “Show All Components” option from the dropdown menu on the bottom.

 💁‍♀️ Use ⌥/Alt + C for Web app or ⌘⌥C for desktop app to quickly switch between show and hide all components.

Color coding helps identify which ones are connected, new, or have an issue on their link. The components highlighted in blue are the components not connected to your codebase yet. The components in gray are the ones that Zeplin detects in your design file over the export process but you don't export to your styleguide. The green indicates they’re linked to the code. You’ll see the components highlighted in red if they have an issue with their link.

You can also filter what to see in the canvas, simply switch between the “Show Components Connected to Code” and “Show Components Not Connected to Code” options.

Next up:

Related articles:

Did this answer your question?