If you have component variants set up in Figma, you can export them to Zeplin with no additional setup. Here's a sample component with variants in Figma:

Let's start off by exporting a component with variants. Launch the Zeplin plugin in Figma by right clicking on the canvas, then select “Plugins > Zeplin“. When you select the component with variants and click the “Export” button, the export panel will open and you can select a project/styleguide which you want to export to.

When you head to that styleguide after the export process completed, you'll notice that Zeplin exported all the variants at once and collected them under a variant section.

Variant sections in Zeplin house all the variants of a component. Each component with variants you export will become a variant section in Zeplin.

☝️ The blue variant menu on the top right indicates that the section is a variant section.

Notice that Zeplin also exports the variant properties from Figma and they are listed below the section name.

If you update these properties in Figma later on, you can simply export the component variants to Zeplin again and properties will also be updated in Zeplin.

☝️ If you previously exported your components to Zeplin, you can safely export them again and Zeplin will move them to a new variant section.

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.

Related articles: