Tutorial Buzz: Creating a Color System in Figma

T. Lanette — Sun, 14 May 2023 10:00:00 +0000

I am fixated with color palettes! I have a collection on Pinterest and a few saved on my Instagram. I just love color palettes! I do plan on using these palettes on my future web pages. However, when I noticed this Creating a Color System in Figma tutorial link in a Tweet, I decided it was time to learn how to make my own.

The tutorial gave three methods for designing your own color system in Figma:

Method 1: Choosing primary, secondary, and neutral colors to build different shades/hues for the palette;
Method 2: Using the Foundation Color Generator (FCG) Plugin and a chosen image to pull colors (my favorite);
Method 3: Using the Material Theme Builder.

The result from Method 1 is shown in the picture on the left. My results after using the FCG plugin are on the right. Unfortunately, I didn't get a result from using the Material Theme Builder plugin because it was taking too long for the color palette to save. (Longer than my ADHD was going to allow.) I had already made up my mind that the FCG plugin was the less time intensive method to use. I liked that you could build and save a list of the color palette and the code for the colors (token) as well. The palettes and the token documentation is listed under the image on the right.

The tutorial was not hard to follow. Adrian has a pleasant voice and took his time to explain the important steps. I was glad to find out how to save color systems/styles under Local Styles in Figma for future use. You definitely need to be familiar with Figma's layout and capabilities (ex., Assets, Libraries, Plugins, etc) before you start.

If you are interested in making your own color systems in Figma, this is a good tutorial to watch.

DEV Community: T. Lanette

Tutorial Buzz: Creating a Color System in Figma