Skip to main content
All CollectionsFigma Integration
Exporting components from Figma
Exporting components from Figma

Learn how to export components from Figma

Didem avatar
Written by Didem
Updated this week

You can export your Figma components directly into Zeplin, and they will appear in the Components tab of your styleguide.

The Components tab will list all components you exported, and shows you from the right panel component details such as size, color, properties, the screens this component was used in, etc. You can also access the component detail view to inspect the component in a more focused view to see its version history, variants, and more details.

☝️ 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

If you would like to learn more about Zeplin's Figma integration or any other topics related to Zeplin, reach out to our Customer Success crew at success@zeplin.io to schedule a 30-minute call.


Related articles

Did this answer your question?