With the Sketch plugin, you can export colors from Sketch to your projects and styleguides on Zeplin.
Defining colors in your Sketch file
In order to export colors, you will need to define them in your Sketch file. Zeplin only recognizes color variables and colors you have set up in your layer styles.
☝️ If you do not see certain colors on Zeplin, first check that the colors have been added as color variables or layer styles.
You can set up color variables and layer styles in the right panel on Sketch.
Adding colors suggested by Zeplin
When publishing an artboard from Sketch, Zeplin automatically exports all color variables in the document, even when some of the colors are not being used in the artboard.
The automatically exported colors will be listed in the project’s styleguide as suggested colors, which means you will need to add them in order to see them in the styleguide. To do that, you can either click on each color to add them individually or select “Add All Colors” to add them all at once.
☝️ If you see suggested colors that are not in your artboards, it means the colors are color variables in your Sketch file.
If you dismiss the suggestions by clicking “Ignore these colors”, Zeplin will not show these colors again on your next export. If you’d like to see suggested colors again, select “Help > Reset Suggested Colors” from the menu up top, while you're in a project. Then, export another artboard from the same file and you will see suggested colors in the project Styleguide.
Exporting colors directly to a styleguide
One unique feature of Zeplin’s plugin on Sketch is that you can export colors directly to a project or styleguide. In the top menu bar on Sketch, select “Zeplin” then “Export Colors” to export only the colors in your file to a project or styleguide.
Naming and formatting colors
When you export colors from Sketch, the names and formats of these colors in Zeplin will match the way your colors are named and formatted in Sketch. Also, there's no character limit for color names.
☝️ If you name your colors using "/" to group them in Sketch (e.g., "Label / Primary" or "Brand / Orange"), once you export them to Zeplin, they will be organized into sections automatically.
Publishing gradients
At this time, Zeplin only displays solid colors. If you export gradients as a document or layer style color, Zeplin will show those colors separately, which are used while defining the gradient.
Duplicating Colors
You now can do this using Semantic colors—learn more about this feature here.
Related articles: