https://uxdesign.cc/use-figma-plugins-to-quickly-generate-a-color-system-7cd2d32bd18b

0*bvXmdhcRq7hxx3Dk

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.

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.

That’s pretty much it. Continue reading for a more in-depth description.

If you’d rather see how this is done via video, I recently posted a video on YouTube showing the same process.

Note: I’m on a Mac and some of the keyboard shortcuts mentioned are platform specific. If you are on Windows, I believe you can swap out “control” for “command”.

Not to overcomplicate things right out of the gate, but to clarify some terms I use throughout the article, you can refer to the graphic below to see what I mean by “Color Swatch” or “Color Chip”.

OK. Still here? Let’s get started.

Make sure you have these Figma Plugins installed:

This plugin will allow us to generate dynamic text labels that describe our colors by name and hex values.

This plugin allows us to very quickly generate and name an entire set of color styles.

• Create a shape for your Color Chip. It can be any shape you want. I’m going to use a square with 3 rounded corners.
• While the shape is selected, place it into an Auto Layout frame (shift + A). Make sure the Auto Layout is set to vertical. This will allow us to later add our descriptive labels directly below the color chip without much fuss. Optionally, you can set a fixed width to about 200.