With the Figma plugin, you can export colors from Figma to your projects and styleguides in 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 in Figma, you can export them to Zeplin using Zeplin’s Figma plugin. To do that:
Right-click anywhere in your Figma canvas and select “Plugins > Zeplin” to launch the plugin.
Click on the “Export styles” dropdown button next to 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 your color styles directly to a project or styleguide in Zeplin via the Quick Actions menu in Figma. To do this:
Open Quick Actions by holding down
⌘ + Por⌘ + *keys on Mac orCtrl + *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 the “Export colors” option.
💁♀️ 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 design 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.
Resetting suggested colors
If you dismiss the suggestions by clicking the “x” button at the top right of the suggested color window, Zeplin will not show these colors again on your next export.
If you’d like to see suggested colors again, you’ll need to select the “Help > Reset Suggested Colors” option from the menu up top while you're in a project or styleguide. Then, when you export another artboard/component from the same file, you will see the suggested colors in your styleguide again.
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.