Skip to main content

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!

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


Terms & ConditionsCookie settings