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

Learn how to export colors from Figma to your project/styleguide

Didem avatar
Written by Didem
Updated over a week ago

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" or add individual colors by clicking on the ones you want separately.

You can choose to ignore the suggestions by clicking “x” at the top right. 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

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?