All Collections
Global Styleguides
Exporting semantic colors
Exporting semantic colors

Learn how to export semantic colors to Zeplin

Burcu avatar
Written by Burcu
Updated over a week ago

While defining the colors of a design system, designers commonly use the same color multiple times if it's used in different contexts. For example, you may have the same shade of gray used both as the Shadow color and as the Secondary Text color. These are called semantic colors since they're named after what they're used for rather than what they look like.

In order to export semantic colors to Zeplin, they need to be defined in your design file first:

When you export the semantic colors from your design file to Zeplin, they will be added to the styleguide.

Semantic colors in Zeplin styleguide

You can check the articles below to learn more about how to export colors and color variables:

Updating your existing colors in Zeplin to match the semantic colors in your design file

If you already have colors in your styleguide, they will be updated automatically the next time you export a component to that styleguide. The colors in the local styleguide of your project will also be updated automatically the next time you export anything to that project.

If you're using Figma, you can also use the "Export colors" and "Export color variables" options on the Figma plugin to update your colors and color variables in Zeplin promptly. Similarly, if you're working with Sketch, you can use the "Export Colors" option from Sketch's "Plugins > Zeplin" menu.

Related articles:

Did this answer your question?