With the Figma plugin, you can export colors from Figma to your projects and styleguides on Zeplin.

Defining color styles in your Figma file

To export colors, you need to define them in your Figma file first. Zeplin only recognizes the colors that are set up as color styles.

☝️ If you don't see some of the colors, make sure that your colors are saved as color styles in Figma before exporting to Zeplin.

Exporting color styles using the plugin

Once you've defined your color styles, you can export them to Zeplin using the plugin. To do that:

Right-click anywhere in your canvas and select “Plugins > Zeplin” to launch the plugin
Click the dropdown menu near the “Export” button
Choose the “Export Color Styles” option
Choose the project/styleguide and click “Export colors”

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

Alternatively, you can export color styles directly to a project/styleguide via the Quick Actions menu in Figma. To do this:

Open Quick Actions by holding down ⌘ + P or ⌘ + * keys on Mac, or Ctrl + * keys on Windows
Type "Zeplin" and hit the "Tab" key to list the available actions
Choose "Export colors…" from the list
Select the project or styleguide you want to export the colors
Click "Export colors"

💁‍♀️ If you'd like to export your color variables in Figma to Zeplin, you can check out this article: Exporting color variables from Figma

Adding suggested colors

Zeplin automatically fetches all local color styles in a Figma file when you export any frame or component from it.

These colors will be suggested under the Color Palette section in your Styleguide or your project's Styleguide tab. You can either add them all using the "Add All Colors" button or add individual colors by clicking on the ones you want separately.

You can choose to ignore the suggestions by clicking "Ignore these colors". When you do this, Zeplin will no longer suggest these colors in this project/styleguide again.

Resetting suggested colors

If you'd like to see the suggested colors again, you can select "Help > Reset Suggested Colors" from the menu up top while you're in a project.

Naming and formatting colors

When you export colors to Zeplin, they will have the same names and formats used in Figma. Also, there's a 200-character limit for color names.

☝️ If you name your colors using "/" to group them in Figma (e.g., "Label / Primary" or "Brand / Orange"), once you export them to Zeplin, they will be organized into sections automatically. Learn more here: Organizing styleguide colors

Related articles: