Skip to main content
All CollectionsSketch Integration
Exporting colors from Sketch
Exporting colors from Sketch

Learn how to export colors from Sketch to your projects and styleguides

Tuba avatar
Written by Tuba
Updated over a week ago

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.


Related articles

Did this answer your question?