You can set up all variants of a component as component variants in Zeplin manually.
Creating variant sections
In order to define component variants, you need to collect all variants of a component under a section, e.g., one section for your button component and another section for your text field component. You can select a component or multiple components, right-click and select “New Section from Selection”.
Now you'll set these sections as variant sections. Variant sections act just like a regular section but provide functionality specific to component variants. All you need to do is click on the blue icon that appears next to the section menu at the top right. Once you do that, Zeplin converts the section into a variant section, and all components under that section 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.
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.