You can set up all variants of a component as component variants in Zeplin manually.
Creating variant sections
To define component variants in Zeplin, first, you need to group all variants of a component into a section—for example, one section for button variants and another for text field variants. Select the relevant components, right-click, and choose “New Section from Selection”.
After this step, you can set these sections as variant sections. They function like regular sections but include properties specific to component variants. To do this, click the blue icon next to the section menu in the top right. Once activated, Zeplin converts the section into a variant section, and all components within it become variants of each other.
☝️ The blue variant menu on the top right indicates that the section is a variant section.
Setting up properties based on naming convention
Since you have a variant section, you'll notice that there are some properties on top, showing types, states or any other values for your variants.
Zeplin generates these properties based on the names of your components. If you follow a common naming convention where you organize component names into parts using /, e.g. “Button / Primary / Hover”, Zeplin should be able to generate the properties automatically after you create the variant section.
Example
Here's how the properties and values will look like if you have the following three components for a button and you create a variant section:
Zeplin names variant, state and size properties automatically based on values.
e.g. A component named "Button / Primary / Hover" will turn into properties as "Variant" for the "Primary" chunk and "State" for the "Hover" chunk.If Zeplin can't predict a property name, it will still generate the property without a name.
e.g. A component named "Button / Primary / Green / Hover" will turn into properties named "Variant" and "State" for "Primary" and "Hover" chunks, and a third property named "Property 1" for the value "Green".
Setting up properties manually
If you don't follow a naming convention in your design tool, you can always manually create these properties and values. To add a new property, or to remove an existing property, you can use the variant menu on the top right.
Once you have the properties, you can select one or multiple components to set their values for each property:
It is also possible to change the order of properties by dragging them up and down or the values by dragging them left and right.