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

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.

In order to refer to this variant, we need to create a new comment. Simply click anywhere on the design while holding down the ⌘ key ( Alt on Windows). Paste the link anywhere in your comment 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: