All Collections
Figma Integration
Exporting components from Figma
Exporting components from Figma

Learn how to export components from Figma

Didem avatar
Written by Didem
Updated over a week ago

You can export your Figma components directly into Zeplin, and they will appear in the Components tab of your styleguide. The Components section includes your common user interface elements and shows you from the right panel of the "Used in" tab which screens are using these components in the project as well.

☝️ Try the Zeplin plugin via https://zpl.io/figma-plugin if you haven't done yet.

Exporting components works exactly the same as exporting frames. Right-click anywhere in your canvas to launch the plugin and select “Plugins > Zeplin”.

☝️ You can also open the Resources menu (⇧ I), click Plugins, search for Zeplin, and then click Run to launch the Zeplin plugin.

You can select a component or multiple components (which are usually located in the Components section in your Figma file) you want to export to Zeplin and click on the “Export” button:

On the project selection window, you can switch between your workspaces to choose the desired project or styleguide.

Once you export your Components into Zeplin, they will be listed under the Components tab.

Generating assets from components

If you'd like to download these components as assets from a screen, you will need to make the component exportable in Figma.

Once a master component is set as exportable, Zeplin generates assets from all of its instances automatically

You can learn how to do this here: Exporting assets from Figma

Related articles:

Did this answer your question?