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:
