Component Variants in Zeplin

Learn more about Component Variants in Zeplin

Didem avatar
Written by Didem
Updated this week

You can collect related components together and assign them different properties by using Component Variants. This helps developers to quickly access different variants of components β€” simplifying their Connected Components setup and even generating code snippets from variants.

Organizing components in your styleguide by variants

You can collect variants of your components under sections and create properties to represent variants.

You can learn more about how to set up your component variants from these articles:

Viewing Component Variants within a design quickly

As developers inspect designs, when they select a component, they can view its properties on the right panel. More importantly, using the variant pop-up, they can also view and inspect other variants (specifically state variants) of the component using the shortcut V.

To learn more, you can check out this article: Viewing Component Variants within designs

Viewing Component Variants in the detail view

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

You can learn more about the component detail view here: Inspecting a component in the detail view

Documenting when and how to use variants in the context of a design

Using smart variant links in notes, you can document when and how to use component variants in the context of a design.

To dig deeper into this or any other topics related to Zeplin, reach out to our Customer Success crew at to schedule a 30-minute call.

Related articles


Did this answer your question?