When you navigate to a screen that uses one of the Component Variants you defined, you can access the properties of the variant and all the other variants of the component directly from within the screen.
Viewing component properties
Selecting a component variant used in the design will reveal component’s name and its properties on the right panel — these properties are the ones we set up in the styleguide.
Properties help developers as they're creating an instance of this component in the codebase.
Viewing other variants of the component
In certain use cases, developers need to refer to other variants of a component used in a design. Most frequently, “State” is the property developers are interested in. For the example above, Zeplin enables developers to access the various states of the button without leaving the page.
Select a component variant used in the design. Press the shortcut V to open up the variant pop-up. As you keep pressing V, you'll notice that Zeplin cycles through different state variants of the component.
☝️ Only the “State” property is prioritized in Zeplin. Pressing the shortcut V cycles through all the state variants of the component.
If necessary, you can always click the dropdown in the pop-up to view different variants for properties. You can also select layers in the variant pop-up to quickly inspect them.
