Adding colors to your styleguide
If you’re working with Figma, Sketch, or Adobe XD, you can export the colors defined in your design file into Zeplin. 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 the direct plugin options, you can follow the steps below to add colors to your styleguide:
Adding suggested colors
When you export any artboard/frame or a component from your design tool, Zeplin grabs all of the colors defined in your design file and lists them under the Color Palette of your styleguide. To add them to the styleguide, you can either add them all using the “Add All Colors” button or click separately on the ones you want to add.
Adding colors from screens
We recommend adding colors to your styleguide via the suggested colors. However, if you still need to manually add colors to your project’s styleguide, you can hover over the color on a screen and click the button right next to the color codes.
💁♀️ 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
You can update your color names by clicking on it. Zeplin remembers color names across projects as you rename them.
Creating Section
You can create new sections in your styleguide in these ways:
Selecting one or multiple colors, right-clicking on the selection, and clicking on “New Section from Selection” in the menu.
Renaming a color by using the “/” convention (aka color path) to create section & subsection.
☝️ Zeplin has a limit of 200 characters for the color path.
If you name your colors using "/" to group them in Figma or Sketch (e.g., "Label / Primary" or "Brand / Orange"), once you export them to Zeplin, they will be organized into sections automatically.
💁♀️ When you delete a section, you’ll be asked to “Delete Colors” or “Move Colors to Parent Section.”
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
Reordering colors
To reorder a color, click on the color itself and then drag the color to the place you want.
💁♀️ You can select multiple colors by CMD/Ctrl + click and reorder them at once.
You'll also see the “Move Color to Section" option when you right-click on a color in a section. 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, just click on the “⨉” icon that appears when you hover over the color. You can also right-click on the color and select “Delete”.
If you want to delete all of your colors in your styleguide at once, you can click on the “…” button and then select the “Delete all colors” option from the revealed 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.