Create a Figma Design System - Color Systems Tutorial (Part 2)
ฝัง
- เผยแพร่เมื่อ 14 มิ.ย. 2024
- My Ultimate Figma Design Masterclass (2,500+ students. 90+ Videos. 10+ hours.)
👉 thedesignership.com/courses/t...
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/...
Outline - Figma Wireframe Kit (350+ components and variants)
👉 www.thedesignership.com/produ...
Sign up to my newsletter for exclusive content:
👉 mizko.net/newsletter
Follow me on IG (Daily updates):
👉 / themizko
===
Level up with me:
Become a legendary designer: thedesignership.com
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko
Twitter: / mizko - แนวปฏิบัติและการใช้ชีวิต
![ถ้าพี่วุ้นท้อง แป้งจะท้องไปด้วยกัน !!!! [ดูคลิปเต็มหน้าช่อง] #Short | PANG ORNHIRA](http://i.ytimg.com/vi/FeyEnVMwitA/mqdefault.jpg)
![เกิดใหม่ทั้งทีก็เป็นสไลม์ไปซะแล้ว ซีซั่น 3 - ตอนที่ 59 [ซับไทย]](http://i.ytimg.com/vi/GmW4a8prWUQ/mqdefault.jpg)
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
thanks for the great info... where can we find the coupon code?
i still don't understand why there is not much traffic here, it's honestly the best UI/UX channel. Thanks Mizko
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 😊
me tooo
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.
Really looking forward to this series! Designing systematically is the way to go.
The 50 shades of gray jokes have me rolling 😂 Such a great tutorial and such helpful info!! Keep it up, Mizko!
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!
Thank you Chris! I’m grateful to hear you’re all learning a lot from the videos ✨
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!
Thank you Asit :) I'm happy to hear!
your videos are amazing! They blew my PAID ui/ux course out of the water 🔥Thank you so much for making them! 🙌
Hey Mizko, please keep doing these type of practical videos. Really valuable and easy to understand. 🔥💪
This type of video is a real gem 💎🥇🥈
Awesome series! Pls, carry on brother.
You are the best teacher! Thank you so much!🥰
Very helpful, straight to the point. Thank You!
love your vibe! thanks Mizko
Thank you for the work you put on this, the whole Figma Design System tutorial is helpful!
Thank you Ivonne :) I'm happy to hear!
Great tips, thanks for sharing Mizko!
Thanks @mizko . This is informative and very helpful.
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. 🔥💯
Pretty cool Mizko, this video was a really game changer for me, God bless you!
Thank you William :) I'm happy to hear!
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 ;)
AWESOME!!! at some point I wanted a love button so I could love the video. Thanks a lot👍 I appreciate the good work
Thank you for this Mizko!
thank you for this series !
Thank you for your videos. It helps me alot
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
Your energie is unbelivable!!!
as a FE engineer/developer, I love that u mention tailwindcss 🙌
Keep the amazing work, i love your videos thank you so much to provide us such an amazing content.
Very helpful. Thank you miz
had me crackin up 😂
always helpful, informative, & funny!
I just purchased your design system as I promised! These video series are so helpful, thanks for the clarity!
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.
love it. new sub!!
thanks bro, this is extremely valuable.
Full of awesomeness!😍
It was extremely helpful
Light, very Light, super light, ultra light, hyper light, mega light, done!!!
great advices and lessons! god bless you, man
Thank you Maxim!
Thanks so much great work!
Great tutorial 👏
Really you teaches very easy way.
Thanks Miz!
Just awesome
Waiting for more such content 👌👌👌🔥
1year later and this is still super valuable
Yah this is really powerful.. thanks
this worked thanks
I pressed that subscribe button right after the fishing video lol
thanks for the info
Really helpful
In one thing I'm still confuse are we just putting those (200,400 etc etc) randomly?
Valuable Video
i got mesmerized everytime he say BADDON! or COLAH!,lol thanks for great tutorials Mr. Mizko
Hahah! That's how it's done down under in AUS 😂
If you haven't watched Part 1 of the Figma Design Series, get on it now 👉 th-cam.com/video/G1xmkQeExJo/w-d-xo.html
thank you so much !!Helpful!!
✨
So much Cooool Bro!!!
i love this
CTRL C to quickly pull to color picker 😉
Thank you
Liking it before even watching the video 🔥
Haha! Love it. Thanks Sahith! For that, you deserve a love react.
love it!
Thank you!
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.
Smashed that button before watching the video
Haha! Love the support Raei!!
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.
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!
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?
Hey Stelios! Sounds good. 10K this week I believe :)
Love your humor
Haha thank you!
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
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 ?
I'm a new subscriber and thank you for sharing this. ❤
Does your Figma Masterclass include the most recent features? Variables, etc... Thanks
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
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?
Where were you when I need you ? 😂 Actually I still need, Thank you for informational channel and sharing your knowledge, understading so easily 😇
Ha! Thank you. Glad you’ve enjoyed
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.
Hey Ladykickz, thank you! We have a community platform for all our students :)
Can Figma handle Spot Color for color separations?
I just have one question! Why do you name the Primary/Main colour - 500? What does this number refer to?
The answer is in the video
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?
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 !!!!!!
Hi Could you show/share your designs on mobile & desktop applications
I went for fishing, but do i have to turn them into components? i mean, how am I gonna use these in future projects?
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?
Remember that there are also lots of other elements and images being used on a design as well. Those will help balance it out.
1:00 - 10 shades of gray and 5 shades of every other color
🔥🔥🔥🔥
Thank you!
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?
How did you change at 6:35 when moving the saturation incrementally? Like what keyboard shortcuts did you use? Thanks!
Nevermind on win you hold ctrl shift and use the up/down arrows
When is part 3 release date?
02:27 Look at his reaction 😂😂😂
hey, can you create a video for beginners like how to start graphic design for complete newbies, I'd really appreciate it
I’m here for you! I’ll definitely line it up another series
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?
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.
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.
@@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.
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.
@@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.
@@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.
Where is the coupon code?
5:20 I wanna know the shortcuts for when he did 3,4,5 . Someone help me please
Hi Mizko, if there is no interactive component enable in figma, possible that it will not work?.. I have Figma but not in beta yet..
Im working on a Checklist . But it doesnt work.
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.
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 😉
@@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 🙂
You could also turn down transparency, then dropplet the color over to another :D!
Yep!
That can cause the colours to become muddy, I’ve tried this approach in the past but never really happy with the results
What If I want to change the main color then it's shades changes too?
It is possible in Figma?
Not just yet! We might release a Figma plugin for that too!
@@Mizko It will really really useful!! thanks in advance
@@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!!
5:15 - How to create color tints in Figma
lolll "10 shades of gray, not 50."
logged in just to make this comment. appreciate your humor
When he says "50 Shades Of Grey" He feels that! "mmhmm" 🙃
A weakness with styles in Figma is that color+text styles doesn't float if it's not a component. So if you wanna change a color to a text that is applied a hundred different places in columns you need to manually change the color all those places. That's terrible. In XD for instance that would be cascading, just like CSS. You just add another color TO the text style instead of having separate styles for color and typography than needs to be handled manually like in Figma. Another hopeless thing in Figma is the way all the style properties are hidden from view, whenever I need to actually see the style properties on a color or text style I'm forced to open it in levels like a Russian doll. And to make sure it's even worse lot of the property text is really muted. :(
First! XD