Figma Design System: 02 Primitive Color Variables

Hello everyone, and welcome to the second episode in a series where we create a Design System in Figma called FDS.

In this episode, we’ll be creating our primitive color variables 🤟.

// Chapters
0:00 Intro
0:16 What are Primitive colors?
1:27 Create color tint scales
6:13 Create color styles
7:25 Covert color styles to variables
8:27 Create documentation
12:04 Outro 👋

// FDS Libraries
Download the Figma files I use in this series here:

// Scale Design System

// Software used

// For updates and other tutorials, follow me on

#figma #designsystem #primitivecolorvariables

[yadetbashe]

literally the only tutorial series that made sense. Can't begin to thank you enough after spending hours of listening to other tutorials twisting this topic.

[trentcox]

Sometimes youtube hits gold. this is one of those moments. eagerly awaiting the rest of this playlist

[abdulrahmaniliyas]

To be honest this is awesome. I really needed a tutorial where someone could really walk me through.The tutorial wasn`t based on showing your skill. But instead how to get it done. It was staright to the point. I feel like I knew what I was doing for the first time. unlike other video. All talk no knowledge pass.
Please make more video

[Edith-Ele]

Thank you so much for creating this video, because you have so much experience creating design systems you have found a way to explain it so well. Thanks again!

[zaklogs]

Thankyou Christopher, i just watched this video twice and almost completed what u are teaching here,
revising the playlist, My life just got easier,
very precise
to the point
industry level knowledge
I am so grateful

[NormandySa]

This is top notch content. Thank you 👏🏼

[linconlgomes]

Hey Christopher, thank you for the amazing content. Please don't stop

[JacileneMoraesdeMatos]

Great content! I’m going to make great use of it—congratulations! And a tip: regarding alignment and spacing between frames, if you have 10 in total and want to standardize the spacing, just take one of the frames and place it at a long distance, select all of them, and apply the vertical distribution alignment. This way, it does it automatically, and you don’t have to adjust each one manually. Thanks!

[zilin]

Thank you so much for this design system tutorial, I can't express how appreciative I am for this series. As a solo designer at a startup company, sorting out the design system is really a pain for me. Your videos really helped me A on growing my knowledge of design system as a whole as well as how to build it from scratch.

[RuchikaGupta-mb]

Really thankyou Chris!! You saved us a lot of time by being on point. A worthful video for all the designers out there.

[modernbeatnik]

Hey Christopher, fantastic series. Wanted to shared a faster way to get the Primitive Colors renamed with the Rename It plugin. After renaming a row of colors to Red for instance, you can then select the entire row of Red, 100-900, open Rename It again and select Keywords: Layer Name then add a "/" in the Name then select Num. Sequence ASC in the keywords and add a "00" to the name. so the Name field should read {%*/%N00}. This renames all of the tints and shades without having to go vertical row by row for 100, 200 and so on. Not a ton of time but a few minutes, just wanted to share with you, cause you saved me a boat load of time hours on everything else. Thanks again.

[Bum-ds]

Thank you so much for such a valuable information. It’s so easy to follow you. I learnt how to spend much less time on creating design system. Thanks a lot

[ram_morey]

02:16 Curious, could you walk through the rationale behind assigning '19' Neutral TS? Would be helpful to understand the underlying logic.
Also, really appreciate your breakdown on design systems—concise and effortlessly explained.

[Kris__Agent]

Thank you so much, you have a real talent for teaching and explaining things so well! You are amazing!

[tanmaypendse]

holy shit this is awesome, very structured approach and detailed, which i love and search for the most

[Dawood_x]

Hello Christopher,
I’ve watched around eight of your classes so far, and they’ve been incredibly beneficial — thank you for sharing such in-depth knowledge. I had one question: Is this design system meant to be reused across all the UI designs I create, or is it usually developed separately for each project? I’d really appreciate your guidance on this.

[gtronics]

Best video, helped and saved a lot of time. Thank you so much! 🙏

[KatarinaResetar]

Subscribed immediately! So happy to check out your videos (and music list!)! Greetings!

[dustinrogers]

Great video. Thanks. Loved the quick swatch guide restyle as well as the plugin suggestions.

[skip]

one of the best design system tutorials out there. the variable color style guide plugin does not give me the short cuts at the to as in your example. it just gives me a table or grid of the colors. And also it does not give me the color swatch component which I see right of your card table.