All Collections
Figma Integration
Setting up your Figma plugin
Setting up your Figma plugin

Learn more about Figma plugin settings

Tuba avatar
Written by Tuba
Updated over a week ago

The Zeplin Figma plugin has a settings menu where you can manage some options for your frames and components.

To open the settings, click on the “…” button:

Export components to styleguide

By default, Zeplin exports your components to your styleguide. If you want to change this and export your components as screens, you can disable the “Export components to styleguide“ option.

Include page in component names

When exporting components, Zeplin will export them with their given name in Figma. Sometimes, a component might have the same name, but look different and belong to a different page.

To include the page name as part of the component name, make sure to enable the “Include page in component names option” under the settings before exporting your component.

You’ll see that the components will now have the page names, like so:

Clip overflowed components

With the “Clip overflowed components” option, you can decide whether to export components with effects that may fall outside of the component’s original bounds or clip effects before the export.

When you export your components by disabling the "Clip overflowed components," you'll see the layer and its effect (like drop shadow, border, etc.), with white background in your styleguide. This way, developers can understand the frontiers of a layer with different parts and absolute positioning.

Auto-export assets

Normally, to export your assets from Figma to Zeplin, you need to mark them as exportable or use the slice feature in Figma before publishing your design. If you want Zeplin to export your assets automatically from the layers that conform to certain patterns listed below, enable the “Auto-export assets” option.

  • Layers with names starting with icon, icn, ic, ico

  • Components that only contain shapes, like icons

Learn more about the auto-exported assets here.

Update color names automatically

When you export your frames or components, Zeplin gets the local colors in your file and adds them to your styleguide with their names.

If you rename your colors in Zeplin and don’t want to update them according to your Figma file next time, you can disable updating their names automatically.

Update screens and components

You can update an existing screen or component in your project/styleguide by name or corresponding artboard in your design file.

To learn more about update options, please check this article.

Frame/Component order

Whether your artboards or components are laid out horizontally, vertically, both horizontally and vertically, or you numbered them in your design file, you can choose the order you want to publish them to Zeplin.

You can choose to order your frames and components by their positions or names by using the Frame/Component order option under the settings.

You can learn what position and name mean here.

Account

You can use the Logout button if you want to log into Zeplin Figma Plugin with another Zeplin account.

Re-export history

Zeplin's Figma plugin remembers the projects or the styleguides you previously exported your designs to. This allows you to re-export your designs with one click to Zeplin—no need to select the projects or styleguides each time.

If you want a fresh start, choose the frames and components you want to clear, go to the plugin settings and click on the “Clear” button near the "Re-export history".

Plugin cache

We have a cache mechanism for assets to avoid exporting the same assets to Zeplin during every export process while you're working with the same file. This way, your export time gets faster.

If you experience an issue with exporting your designs in the file which you successfully exported from before and want to start a fresh export, you can clear the cache for the plugin—click on the "Clear" button near the "Plugin cache".

Reset Sample Project

If you’re new to the Zeplin Figma plugin, you can create a sample project that walks through Zeplin’s key features using your Figma designs.

If you want to go through the onboarding experience again with a different set of designs, click on the “Reset” button.

If you would like to learn more about Zeplin's Figma integration or any other topic 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?