Adding colors to your styleguide
If you’re working with Figma, Sketch, or Adobe XD, Zeplin automatically fetches all colors defined in your design file when you export any artboard or component from it. You’ll also have a specific option in Zeplin’s Sketch plugin to export your colors directly and two specific options in Zeplin's Figma plugin to export your colors and color variables. Check out the following articles to learn more:
Besides exporting them from your design file, which is the recommended way, you can also add colors to your styleguide by clicking on the options button right next to the color name and selecting “Add to styleguide” there.
💁♀️ If you want to add the colors on a screen to your global styleguide, you can move them after adding them to your project styleguide. Check out this article: Moving colors, text styles or components between styleguides
Editing colors
When you navigate the Color page under Foundations, you'll see a list of all the colors added to the styleguide.
On this page, you can edit the names of your colors by simply clicking on their names.
Creating sections
You can group your colors by creating sections in two ways:
Select one or multiple colors, right-click, and select “New section from selection” in the menu
Rename a color by using the “/” convention (aka color path) to create a section or a subsection
☝️ Zeplin has a limit of 200 characters for the color path.
If you’re working with Figma or Sketch, and name your colors using "/" to group them, such as "Label / Primary" or "Brand / Orange", once you export them to Zeplin, they will be organized into sections automatically.
In addition to this, when you export your color variables from Figma, Zeplin will automatically create collections and groups based on your structure in Figma. You can learn more here: Exporting color variables from Figma
💁♀️ When you delete a section, you’ll be asked to “Delete Section” or “Move Colors to Parent Section.”
Reordering colors
You can reorder a color by clicking on it and dragging it to your desired position. To reorder multiple colors at once, hold CMD/Ctrl and click to select them before dragging.
If you have color sections, you'll also see the “Move color to” option when you right-click on a color. Using this option, you can move your color either to another section or to the root styleguide section if you want to keep them ungrouped.
☝️ You can only reorder color variables by dragging and dropping them within their groups.
Deleting colors
To delete a color from your styleguide, right-click on the color and select “Delete color”. You can also delete multiple colors by selecting and right-clicking on them.
If you want to delete all of your colors from your styleguide at once, you can click on the “…” options button at the top right, then select the “Delete all colors” option from the menu.
☝️ If you'd like to delete a color variable from your styleguide, you'll need to delete it on Figma first and then re-export your color variables.