With the Sketch plugin, you can export colors from Sketch to your projects (local styleguide) and global styleguides in Zeplin.
Defining colors in your Sketch file
In order to export colors, you will need to define them in your Sketch file first. Zeplin only recognizes color variables and colors you have set up in your layer styles.
☝️ If you do not see certain colors in Zeplin, first check that the colors have been added as color variables or layer styles in Sketch.
You can set up color variables and layer styles from the right panel in Sketch.
Adding colors suggested by Zeplin
When publishing an artboard or a component from Sketch, Zeplin automatically exports all color variables in your Sketch document, even when some of the colors are not being used in the artboard/component.
The automatically exported colors will be listed under the “Color palette” section in your 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.
Resetting suggested colors
If you dismiss the suggestions by clicking the “x” button on the right top of the suggested color window, Zeplin will not show these colors again on your next export.
If you’d like to see suggested colors again, you’ll need to select the “Help > Reset Suggested Colors” option from the menu up top while you're in a project or styleguide. Then, when you export another artboard/component from the same file, you will see suggested colors in your styleguide again.
Exporting colors directly to a styleguide
One of the cool features of Zeplin’s Sketch plugin is that you can export colors directly to your project styleguide or global styleguide. To do this, you can use the “Plugins > Zeplin > Export Colors…” option in the top menu bar of Sketch.
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
If you want to keep the same color multiple times under your styleguide to use them in different contexts, you can do this using semantic colors. Learn more about this feature here.