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

You can export your defined color variables to Zeplin using the Figma plugin. To export your 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:

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.

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.

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.

Related articles: