You can use smart variant links within notes 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 notes

In order to refer to this variant, we need to create a new note. Simply click anywhere on the design while holding down the key ( Alt on Windows). Paste the link anywhere in your note and when you post it, Zeplin will convert the link to the name of the variant. 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?