With the Figma plugin, you can export color variables from Figma to your projects and styleguides on Zeplin.
From the right panel of your Figma design file, you can see your color variables. To learn more about color variables in Figma, you can check out this collection from Figma Learn: Variables
Exporting color variables using the plugin
You can export your defined color variables to Zeplin using the Figma plugin. To export your color variables:
Right-click anywhere in your canvas and select “Plugins > Zeplin” to launch the plugin.
Click the “Export styles” dropdown button next to the Export button.
Choose the “Export Color Variables” option.
Choose the project/styleguide and click the “Export color variables”.
☝️ 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 variables directly to a project/styleguide via the Quick Actions menu in Figma. To do this:
Open Quick Actions by holding down
⌘ + Por⌘ + *keys on Mac, orCtrl + *keys on WindowsType “Zeplin”, and hit the “Tab” key to list the available actions.
Choose the “Export color variables…” option from the list.
Select the project or styleguide you want to export the color variables.
Click the “Export color variables” button.
Color variables in Zeplin
When you export your color variables to Zeplin, you'll see them under the “Color palette” section of your styleguide along with your other styleguide colors. Exported color variables will have the same structure in Zeplin with names and modes as you set in your Figma design file.
☝️ It's not possible to edit color variables in Zeplin to make sure they're synced with your Figma design file. If you have changes for your color variables in Figma, you will need to re-export them to Zeplin using the plugin.
Collections and groups
When you export your color variables, Zeplin will create collections and groups for them automatically under your styleguide in the same hierarchy as in your Figma file.
To provide more details about your color variables, you can add a description of up to 100 characters to their collections or groups. Click on the "..." button on the right of a collection or group, and select "Add a description".
To edit your existing description, you can click on it or select "Edit description" from the "..." button.
Also, if you remove a collection in your design file completely, you can delete that collection from Zeplin using the "..." button on the right of that collection. Deleting a collection will delete all variables and all groups in the collection as well.
☝️ If you delete an individual color variable in your design file, you'll need to re-export your color variables to Zeplin so that it can be deleted from Zeplin as well.
Alias for a color variable
If a variable is referenced in another variable, you'll see it as an alias instead of the color code in Zeplin. When you click on the alias icon revealed once you hover over the alias, Zeplin displays the details of the referenced variable with its modes, if any.
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