Use Figma plugins to quickly generate a color system

Photo by Copper and Wild on Unsplash

In Figma, using defined styles (colors, type, effects, etc.) early and throughout a design project can have a lot of positive impact on your efficiency and output. I’m not necessarily here to sell you on using styles in Figma, but I would like to show you how to take a somewhat tedious process—setting up all the styles for a basic color system—and speed it up.

TL;DR

This really is a simple process, but some of the steps require a fair amount of explanation. So, I wanted to include a brief TL;DR for those who don’t need all the additional detail.

1. Create a shape layer and duplicate it as many times as the colors needed in your color system.
2. Uniquely name each of the shapes. These names will determine the names of the color styles.
3. Set the color of each shape layer appropriately to the needs of your color system.
4. Select all those shapes and launch the Chroma Colors plugin to instantly generate the color styles.

Optional — select all the shapes and place them into an Auto Layout. With the shapes still selected, launch the Smart Text plugin to add a text label with the color name and hex values.