Creating an Advanced Figma Color Variable Library

Learn how to build an advanced color library for your design system using Figma's variable functionality.

0:00 An Introduction
0:59 Mapping Brand Colors
3:40 Mapping Theme Colors
7:19 Mapping Element Colors
11:27 Changing Colors

[schroepa]

Thank you so much for this reminder of how to structure our design decisions to have them maintainable and ready to upscale! Love how you explain things ❤

[ajaypawriya]

This is such an underrated channel and video. I would have easily paid $20-30 dollars for this UI kit and this course. Good work man

[LilOKhalifaa]

Simple and straight to the point, thanks for your time !

[michellehansen]

Brilliant stuff and just what I was looking for, thanks!
😍

[brixencph]

You don't need to right-click and press "create alias". It automatically creates an alias by picking a color from the 'Libraries' instead of 'Custom'.

[another.designer]

Wow, wow, beautiful and beautiful. Super cool hats off to efforts. I am new to DS I so excited to try it asap.

[stoicism-principles]

Thanks for your insights on Figma variables and design system structure! Much appreciated!

Is it necessary to use a complex color system for minor brand color changes when updating the library color values achieves the same result?

However, what will happen to the color-named variables if the brand undergoes a complete rebranding?

For example, if the new brand style guide doesn't include colors like blue, teal, or purple, creating a new set of color-named variables and reassigning them would require much maintenance.

Moreover, rebranding usually entails changing the color scheme and introducing new features and components, potentially resulting in more substantial design system changes.

Furthermore, new team members may face a steep learning curve when utilizing and managing the intricate design system color styles.

Isn't it better to keep the system simple for big UI projects and use name conventions based on element purpose instead of color-named variables?

For example:
BG: Primary, Secondary, etc.
Base: 50, 100, 200, 300, 400, 500, etc
Accent: 50, 100, 200, 300, 400, 500, etc
Action: 50, 100, 200, 300, 400, 500, etc
Negative: 50, 100, 200, etc
Positive: 50, 100, 200, etc
Warning: 50, 100, 200, etc
Info: 50, 100, 200, etc

Plus, some notes on color usage.

This approach will provide you with a reusable flat design system across projects of all sizes and unlimited branding options based on my experience.

What do you think?

[beInspiring]

Nice video and information but my question is,
what is the difference between Brand and Theme Colour?

[leonidfishman]

Thx for the great content. At 11:46 you talking about the right way to build a button. Where is the video you speaking of? Would love to see it.

[michalbace]

Hi, i have a question, what if i have blue-default for example for text and also buttons but i only want to change color of buttons. Thanks for response.

[kenjues]

Great. What happens if the blue brand color is update to a purple? Not all the action color will be blue colors.

[hmiln]

This is great! How would you combine this with a light and dark theme? (or are we going to have to wait for combo variables?)

[Craaaaabs]

Do you have recommendations for automatically generating all of these variables to a document that is similar to the one you started out with: All colors with their names, hex codes and swatch?

[medhakulkarni]

Great video!! However there is no figma file to download.Could you please add that .Thank you

[waqasmehmood]

Thanks for this! I have a question about opacity in variables. I want to create a variable "White" in my brand colors and in my theme colors i want to use the same "White" but with different opacity. Is it possible to have control over the opacity for the same color token without creating a new one?

[noisehead]

Hey, thanks for the tutorial, you named some theme token colors neutral-light for example. How would this work for a dark theme that also uses this token?

[ianrotea]

This is such a helpful video, thank you very much!

[tashfix]

I'm a bit confused. What is the point of going from color -> alias -> map when you could just go from color -> map ? What value does the middle step make?

[kasidyray]

Great stuff, thank you for sharing this. Quick question...What are the pros of having [ Brand tokens <- Theme tokens <- Text, Border etc.] as opposed to having [ Brand tokens <- Text, Border tokens etc.] ?

[NicoliAGomes]

Wow, this video was just what I needed. You have gained another subscriber!