Skip to main content
All CollectionsComponents in ZeplinComponent Variants
Setting up Component Variants from Figma
Setting up Component Variants from Figma

Learn how to set up Component Variants from Figma

Didem avatar
Written by Didem
Updated over 5 months ago

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:

Exporting component variants from Figma

Let's start by exporting a component with variants. Launch the Zeplin plugin in Figma by right-clicking on the canvas and selecting “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 to export to.

When you head to that styleguide after the export process is 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, which 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 the 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

Did this answer your question?