While defining 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.
Previously, Zeplin only allowed the same color to appear once in a styleguide. In order to support semantic colors, we recently released an update. With this update, you will be able to export semantic colors defined in your design file to Zeplin and they will all be added to the styleguide as expected.
In order to export semantic colors to Zeplin, they need to be defined in your design file first:
- From Figma, Zeplin exports all colors defined as Color Styles.
- From Sketch, Zeplin exports all colors defined as 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 next time you export a component to that styleguide. The colors in the local styleguide of your project will also be updated automatically next time you export anything to that project.
If you’re using Sketch, you can also use the “Export Colors” option from the “Plugins > Zeplin” menu of Sketch to update your colors right away.