Create a Figma Design System - Color Systems Tutorial (Part 2)

[@Mizko]

Become a FIGMA EXPERT With me today! My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.) 👉 thedesignership.com/courses/the-ultimate-figma-masterclass Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets) 👉 thedesignership.com/products/figma-design-system/ Outline - Figma Wireframe Kit (350+ components and variants) 👉 www.thedesignership.com/products/outline-wireframe-kit Yours truly, Mizko

[@ReggieMontinola]

thanks for the great info... where can we find the coupon code?

[@pranjalaswal7618]

i still don't understand why there is not much traffic here, it's honestly the best UI/UX channel. Thanks Mizko

[@Bowsers_Trousers]

This is easily my favorite UX channel! I wish I had known all this information earlier, it would have made my life way easier. The level of detail you go into with bite sized video lengths is exactly what a lot of us need. Keep up the awesome work!

[@Mizko]

Thank you Chris! I’m grateful to hear you’re all learning a lot from the videos ✨

[@shivanikalkeri9175]

Im so glad this is not a 3 hour long video which most people have to explain a design system. Im so glad I bumped into this video 😊

[@joanerhabor3233]

me tooo

[@arianazdadgar]

I've just started UX and I am soooooooooo glad I came across your channel!! You are a great teacher Mizko :) Look forward to learning much more from you.

[@seyitdrms]

This was the most efficient way of telling how important having a good design system. Great work!

[@zalodias123]

Really looking forward to this series! Designing systematically is the way to go.

[@ernestoben99]

This is the best UX UI channel for sure

[@asitkhanda]

You have been a life saver. Can't thank you enough! You are making these tutorials that are so easy to understand and even short! Hats off!

[@Mizko]

Thank you Asit :) I'm happy to hear!

[@LydiaCarlson]

The 50 shades of gray jokes have me rolling 😂 Such a great tutorial and such helpful info!! Keep it up, Mizko!

[@bukoyefelix170]

coming here after 3 years and I learnt a lot. Appreciate you bro

[@amarinapinheiro]

Thant you so much!! I'm migrating from graphic design to UX/UI and I feel like an illiterate in this area. Your channel is helping me a lot through this process

[@wen_51]

your videos are amazing! They blew my PAID ui/ux course out of the water 🔥Thank you so much for making them! 🙌

[@itpedia2311]

Really helpful In one thing I'm still confuse are we just putting those (200,400 etc etc) randomly?

[@1WillyDAVID]

Pretty cool Mizko, this video was a really game changer for me, God bless you!

[@Mizko]

Thank you William :) I'm happy to hear!

[@dbqpmn]

You are the best teacher! Thank you so much!🥰

[@mourbatsalim4830]

Your energie is unbelivable!!!

[@DioArsya]

as a FE engineer/developer, I love that u mention tailwindcss 🙌

[@AminsHub]

Really you teaches very easy way.

[@MeetRayka]

Hey Mizko, please keep doing these type of practical videos. Really valuable and easy to understand. 🔥💪

[@ivonnegracia9193]

Thank you for the work you put on this, the whole Figma Design System tutorial is helpful!

[@Mizko]

Thank you Ivonne :) I'm happy to hear!

[@r_Abdullah99]

This type of video is a real gem 💎🥇🥈 Awesome series! Pls, carry on brother.

[@blissfuly8375]

Thanks @mizko . This is informative and very helpful.

[@maxdronov]

great advices and lessons! god bless you, man

[@Mizko]

Thank you Maxim!

[@aminkhalesian]

love your vibe! thanks Mizko

[@ugochukwuchukwudifu9776]

AWESOME!!! at some point I wanted a love button so I could love the video. Thanks a lot👍 I appreciate the good work

[@aysbunnyy]

Hello. Thank you for the videos. However, you did not put the option of subtitles in Turkish here or on the designership website. I hope you will consider this soon.

[@marzbitenhaussen]

Light, very Light, super light, ultra light, hyper light, mega light, done!!!

[@mervekook718]

I just purchased your design system as I promised! These video series are so helpful, thanks for the clarity!

[@Mizko]

Hey Merve! Oh thank you so much, I didn’t seem to see it come through but hopefully you got it? Let me know if you have any questions and be sure to watch all the videos I’ve included in the pack 😃 I’m very happy to hear you find value in the videos.

[@marzbitenhaussen]

i got mesmerized everytime he say BADDON! or COLAH!,lol thanks for great tutorials Mr. Mizko

[@Mizko]

Hahah! That's how it's done down under in AUS 😂

[@GarethStanford-qc2gm]

Very helpful, straight to the point. Thank You!

[@MarkNDelaSanta]

Thank you for this Mizko!

[@raei-8579]

Smashed that button before watching the video

[@Mizko]

Haha! Love the support Raei!!

[@Yovistamps]

thank you for this series !

[@ayanlakinoluwafemi2525]

Very helpful. Thank you miz

[@EndroGAV]

What naming convention did you use at 8:15 I’m finding it hard to see the text that creates the hierarchy

[@alakaabimbola6951]

1year later and this is still super valuable

[@SahithNayudu]

Liking it before even watching the video 🔥

[@Mizko]

Haha! Love it. Thanks Sahith! For that, you deserve a love react.

[@dumuniz]

Great tips, thanks for sharing Mizko!

[@joshuaogungbemi7284]

Great video. Thanks for this

[@chinmaykulkarni201]

You sir, need to have more subscribers. There are no tutorials which i have found on designing the UI as simple and effective as yours. 🔥💯

[@gabqurizen1651]

Love it. Thank you for sharing. And I got one of your design system template last week. Woohoo can't wait to get smarter with Figma ;)

[@babayaga6871]

Thank you for your videos. It helps me alot

[@Aless-s5j]

Keep the amazing work, i love your videos thank you so much to provide us such an amazing content.

[@stevendesigner]

Great tutorial 👏

[@ArianReitz]

Thanks so much great work!

[@shadle2361]

CTRL C to quickly pull to color picker 😉

[@esstev]

Does your Figma Masterclass include the most recent features? Variables, etc... Thanks

[@LemonDust13]

had me crackin up 😂 always helpful, informative, & funny!

[@fettudocho]

thanks bro, this is extremely valuable.

[@adilbek.ermekov]

It was extremely helpful

[@danielwatson6529]

love it. new sub!!

[@simonapetrauskaite386]

atomic creates a lot of issues if you want to create a dark mode or any other theme later on. it's only good for smaller projects or websites, but the earlier in the project you switch to semantic the less tears will have to shed in the future xD

[@MaxWeir]

Do you have a better way to create a colour system? your example is a little random and the colours are created using guesswork and by what you think suits best. A few issues I see in doing it this way: 1. What you think looks right, might not look right to others. 2. Your screen settings could be different to others, so colours might differ from monitor to monitor. 3. Guessing is very inconsistent, lining each base colour shade alongside each other would not look like they are in sync e.g some could be lighter/darker at each colour step. 4. Is accessibility considered? even though its early in the process, is there any testing done for colour contrast? 5. This process looks like it takes time, creating shades for multiple collours would be tedious. 6. How are you greys decided? warm, cool, non-tinted, brand tinted etc? 7. If you add another shade to the system e.g 400 shade - how is this generated? I'm keen on taking your course but would like to know how you tackle this as I'm yet to find a process that works consistently.

[@aurelianspodarec2629]

Uffff. You're looking too much into it. This is the best colour system so far - ps, he didn't invent it. But everyone uses this color system now.

[@arjunaleri2064]

@@aurelianspodarec2629 He is not looking too much into it, these are extremely important questions. Yes, we use color systems like this one in real organizations, real products, but the systems we use take all of the questions he is asking directly into account. We design our color systems around exactly the questions he's asking, otherwise they break.

[@arjunaleri2064]

Really great questions Max. Im a design system designer and many of these questions are key questions for people like me. I don't have the capacity to answer all these questions here, so ill try to point u in the right direction: General: A) Look into other design system's documentation like IBM's Carbon, Material Design, Asana and Netflix, etc., and reverse engineer to find the answers to these and all your questions. Our field is new, but we are not the first. Lucky for us, design systems need documentation to work and a lot of your answers are out there but hard to find. B) Figma's Schema series has some good answers to these questions from folks working at netflix and beyond. Check out that video series and find the videos relevant to your questions C) Something is better than nothing, yes. However, if you can, avoid guessing. Guessing is not the way. You are doing the right thing looking for answers to these questions and building an infrastructure that takes these questions into account is a good idea. Direct: Q1+2+3: You need a color mapping calculator that calculates 10 shades/tints of color, generated off of a base color, by mapping CONTRAST. This mathematical approach to color will help with a consistent jump from one color to the next. If needed you can manually do this in figma via screenshots of your color board. get a nice consistent line from shade 100 to shade 900, and try to do that across all your functional colors. always text your hypotheses in context (in product, and in relation to your other colors in the system). Q4: Accessibility practices will help guide you toward answers. Follow them and they will help prep you for light and dark mode and keep your system consistent and clean visually. Q5: of course it takes time Q6: Based on the products needs and color theory and often revolve around foundational brand colors. Then apply the contrast jumping technique i described earlier. Q7: Lots here, but better to have a full 10 color shades and only turn the ones you need/use into color styles. If you need to add new ones, generate with accessibility, contrast, etc. in mind.

[@aurelianspodarec2629]

@@arjunaleri2064 Its a flexible system. What else do you have in mind? If we are talking about naming conventions then that's dynamic for each product/site but these conventions are obvious, unless one isn't aware of 'brand/primary' color, 'accent' etc maybe.

[@aurelianspodarec2629]

@@arjunaleri2064 Okay, so you just basically said what I did xd Golden ration, material design whatever, they are all based on the same concept... they just look different, different styling an implementation of the pretty much same concept.

[@erichepperledesigns]

1:00 - 10 shades of gray and 5 shades of every other color

[@suzuhaa]

Love your humor

[@Mizko]

Haha thank you!

[@AdityaMehtaMusic]

Full of awesomeness!😍

[@ekaterinadergam4596]

thank you so much !!Helpful!!

[@Mizko]

✨

[@steliospapadopoulos4099]

10k Subs are getting closer^.^ Thanks for the video Mizko Can you go in-depth about shadows on cards/active/hover states or even shadows on illustrations(UI design). When it is necessary to have light or colourful shadows?

[@Mizko]

Hey Stelios! Sounds good. 10K this week I believe :)

[@thankgodlove]

Thanks Miz!

[@jatinraj4974]

Waiting for more such content 👌👌👌🔥

[@gehadmagdyelkhouly96]

hollo, mizko your channel is very amazing and realiy hel[ful , i ask why i should make the colour with all this shades why don't apply only the colour present in my app only

[@Saasou]

I just have one question! Why do you name the Primary/Main colour - 500? What does this number refer to?

[@ahruf]

The answer is in the video

[@lalitkumar-zm9sq]

want to ask a few things when you already have a brand color how do you create a lighter and darker shade for the same? there's any tool for it?

[@verunda.7042]

Hello Mizko! I always use Adobe Color to see what colour is sympthize with another, how do you sort stuff like: primary color is some red whatever, and you need an error button. How do you choose which colour will error be? Thank you for your free content, its really opening my eyes as a beginner in learning. Thank you!

[@paulaespindola4200]

I pressed that subscribe button right after the fishing video lol

[@seize2179]

How did you change at 6:35 when moving the saturation incrementally? Like what keyboard shortcuts did you use? Thanks!

[@seize2179]

Nevermind on win you hold ctrl shift and use the up/down arrows

[@davincilab-007]

Just awesome

[@aurorazeyn1356]

Where were you when I need you ? 😂 Actually I still need, Thank you for informational channel and sharing your knowledge, understading so easily 😇

[@Mizko]

Ha! Thank you. Glad you’ve enjoyed

[@abinashmohanty4258]

Love your videos. Watching n learning from you a lot. P.S - Color code for Error 300 is same as that of Primary 300. Thank you.

[@lowlay964]

I'm a new subscriber and thank you for sharing this. ❤

[@tejaswinichugh]

I went for fishing, but do i have to turn them into components? i mean, how am I gonna use these in future projects?

[@LuisAntuche__]

this worked thanks

[@onyangoarnold1923]

Yah this is really powerful.. thanks

[@shivanisharma-e2j]

hey! your videos are really helpful. but i am facing 1 issue, i am not able to get the categories like its shown in your video, i am getting each color individually without categories (like primary color, neutral). i am just getting colours in the list without any description categories. PLEASE HELP !!!!!!

[@MrKikk]

5:20 I wanna know the shortcuts for when he did 3,4,5 . Someone help me please

[@fernwehtwl]

i don't get why we need to add main in teh naming convention for the blue color. There is only 1 primary color used right? So why do we need to name main across all blue colors?

[@СергейИванов-о6б5ш]

thanks for the info

[@talfrei]

Can Figma handle Spot Color for color separations?

[@naufalghifari5103]

So much Cooool Bro!!!

[@priyanshu.illustrates13]

Thank you for making my life easy❤😂

[@Saasou]

love it!

[@Mizko]

Thank you!

[@ashishchandna5327]

Valuable Video

[@playpiano2264]

When is part 3 release date?

[@Mayank-rs7kg]

02:27 Look at his reaction 😂😂😂

[@surendarr2177]

Thank you

[@user-lp7rm1cg1l]

One thing I'm always concerned about is having a 4-5 color pallet and only using 2 or 1 and lots of gray tones. Do you have any advice for this?

[@Mizko]

Remember that there are also lots of other elements and images being used on a design as well. Those will help balance it out.

[@lAcedUpLiss]

Hey, I'm just checking out your figma master class. Is there any feedback provided for students once they complete the assignment? Or do you have a discord server for students? Love your youtube channel by the way - really high quality content.

[@Mizko]

Hey Ladykickz, thank you! We have a community platform for all our students :)

[@thelias91]

Super interresting, but I have a question : do you use this same design system for any projects you do ? Or create one from scrach for each new projects ? or mix of both ? Or you duplicate it and modify to fit the visual identity ?

[@nurbol-designer]

🔥🔥🔥🔥

[@Mizko]

Thank you!

[@jacobdiehl1378]

Okay, so I want to make multiple sets of primary, secondary, success, warning and error. And then I want a naming convention where instead of blue 200 I want primary 200... And then I want to be able to change the color of my whole project based on which set I choose. Is this possible?

[@saartnomsky4523]

i love this

[@NAVEENKUMAR-th5hf]

Hi Could you show/share your designs on mobile & desktop applications

[@mcfish8633]

Top work Mizko, shame your design system was not a bit cheaper currently, more being have other priorities in mind. Top system all the same though Mizko.

[@Mizko]

Sorry buddy! My team and I put a lot of effort and work into these products and also these videos to help educate you all. Maybe you’ll realise how much time and headaches my products will save you later on 😉

[@mcfish8633]

@@Mizko That wasn't meant to come across the way it did, will certainly be on the list of things to get. Keep up the good work 🙂

[@erichepperledesigns]

5:15 - How to create color tints in Figma

[@shahadat6372]

hey, can you create a video for beginners like how to start graphic design for complete newbies, I'd really appreciate it

[@Mizko]

I’m here for you! I’ll definitely line it up another series

[@plain_kady]

Where is the coupon code?

[@dinguuuus]

You could also turn down transparency, then dropplet the color over to another :D!

[@Mizko]

Yep!

[@MaxWeir]

That can cause the colours to become muddy, I’ve tried this approach in the past but never really happy with the results

[@WA5ON1]

The naming convention with numbers 200, 300, 400 500, 600, 700 etc. where does it come from? I know that has something to do with css but what exactly? Can someone explain this?

[@oussamabouyardane2431]

What If I want to change the main color then it's shades changes too? It is possible in Figma?

[@Mizko]

Not just yet! We might release a Figma plugin for that too!

[@oussamabouyardane2431]

@@Mizko It will really really useful!! thanks in advance

[@oussamabouyardane2431]

@@Mizko Did you try using overlay fill to achieve a color shades? I just found out this little trick and it works just fine!! and I can change all color shades once!! very powerful trick!!