All Collections
Components in Zeplin
Component Variants
Document when and how to use Component Variants
Document when and how to use Component Variants

Learn when and how to use Component Variants

Didem avatar
Written by Didem
Updated this week

You can use smart variant links within comments to document when and how to use component variants in the context of a design.

Copying variant links

Let's start off by copying a link to a component variant using the variant pop-up. Select a component used in the screen, press V to bring up the variant pop-up. Select the variant you want to refer to and click the copy link button.

💁‍♀️ You can also copy the link to a component variant from the styleguide.

Using variant links in comments

In order to refer to this variant, we need to create a new comment or annotation. Simply click anywhere on the design while holding down the key ( Alt on Windows), select “Annotation” from the top left menu if you want to continue with an annotation. Paste the link anywhere.

When you post it, Zeplin will convert the link to the name of the variant and when anyone clicks on this link, the variant pop-up will show up.

Here's an example where we're documenting that the disabled state of the button should be used while the data is being fetched from the server:


Related articles

Did this answer your question?