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 component variants into a section under a component page—for example, one page for button components, and under this page, one section for icon buttons and another section for chip buttons.
Under a component page, select the relevant components, right-click, and choose "Create 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.