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

Select a component variant used in the design. That will reveal the name of the component 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 other than “State”.

You can also select layers in the variant pop-up to quickly inspect them.

Related articles:

Did this answer your question?