Zeplin Figma

Oct 26, 2017 Zeplin exports images automatically from exportable layers in your designs, which we call Assets. To mark a layer as exportable in Figma, simply add an export option to it by clicking the + button on the Export section, from the right panel. “If Figma is our ‘playground’ where we can run around and make as much of a mess as we need to, then Zeplin is the ‘shelf’ where we can place finalized designs.” Without using Zeplin, Caroline says trying to keep their distributed team coordinated would quickly get hectic. With Zeplin, you can publish finalized designs from Figma, Sketch, Adobe XD and Photoshop. Developers get a 'locked' design to build from, while designers can iterate on the next great release. Zeplin is the source of truth for finalized designs, if it’s not in Zeplin it won’t be in the shipped product.

You now 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 which screens are using these components in the project as well.

☝️ Install the Zeplin plugin in Figma via https://zpl.io/figma-plugin if you don't have it 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 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:

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

Zeplin

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:

We’ve rebuilt the Figma integration from the ground up to fix critical performance issues. If you install the Zeplin plugin in Figma but don’t have the Zeplin desktop app installed yet, the plugin won’t be able to launch Zeplin for the export process to be done and it will be stuck on the 'Launching Zeplin…' state.

Please download the Zeplin desktop app here and try exporting again:

☝️If the issue continues, reach out to us using the chat dialog on the bottom right or email us at [email protected]

Related articles:

Zeplin Figma Plugin

  • Exporting components from Figma