Skip to main content
Question

About Naming Colors in Design Systems (Beginner in Figma)

  • April 20, 2025
  • 1 reply
  • 44 views

Mymona Lisa

Hey designers!

I’m pretty new to both Figma and UI design, and I’ve been struggling a bit. Honestly, it’s hard to explain exactly what I’m stuck on—partly because I don’t even know what the terms are yet! But I’ve noticed that a lot of experienced designers use something called a design system, and it seems super helpful.

One thing I’m really curious about is how to name color variables in a design system. For example, I often see things like Blue-50, Blue-100, and so on. What’s the logic behind that kind of naming? How does it work?

I’ve watched a bunch of YouTube videos, and many of them recommend using plugins. But I’d really like to understand how to name them myself, the proper way.

Is there a standard I should be following? Should I stick to the same naming style all the time? I’d really appreciate any explanations or resources you could share!

Thanks so much in advance. I’m finding all of this a bit overwhelming as a beginner, and your help would mean a lot!

1 reply

Raphael_M
  • Power Member
  • 394 replies
  • April 22, 2025

The easiest way is to define a bunch of different colors (most colors are the ones on the rainbow: red, green, blue, yellow...) they will be the mid scale or the base of that color then use a color scale generator to generate a bunch of different shades of that color.

 

e.g. using 10 scales

base: red-50 (or 60)

shades: red-10, red-20, red-30 … red-100

The lesser the value of the number, the lighter the shade

 


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings