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.
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! 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 !!!!!!
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 😉
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 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!!
@@Mizko I actually just found a super fast way to auto generate. You can use a plugin such as Color Compass to generate the shades/blends. Then rename all of the generated rects with a folder structure and number ie: "primary / $nn" Then select all the rects and use "Generate Styles" with the styler plugin. Boom! All styles created in less than 10 seconds :)
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.
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!
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.
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 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.
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
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?
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?
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
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?
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. :(
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 ?
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
![Yailin La Mas Viral, @kreizyk.official - Dale 2 (Remix) [Video Oficial]](http://i.ytimg.com/vi/JaYHBzgqz94/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?
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
This was the most efficient way of telling how important having a good design system. Great work!
Really looking forward to this series! Designing systematically is the way to go.
This is the best UX UI channel for sure
Hey Mizko, please keep doing these type of practical videos. Really valuable and easy to understand. 🔥💪
Really helpful
In one thing I'm still confuse are we just putting those (200,400 etc etc) randomly?
This type of video is a real gem 💎🥇🥈
Awesome series! Pls, carry on brother.
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.
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 😂
Thank you for your videos. It helps me alot
Does your Figma Masterclass include the most recent features? Variables, etc... Thanks
Great video. Thanks for this
i still don't understand why there is not much traffic here, it's honestly the best UI/UX channel. Thanks Mizko
Liking it before even watching the video 🔥
Haha! Love it. Thanks Sahith! For that, you deserve a love react.
Thanks Miz!
Smashed that button before watching the video
Haha! Love the support Raei!!
It was extremely helpful
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!
Great tips, thanks for sharing Mizko!
CTRL C to quickly pull to color picker 😉
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.
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 it. new sub!!
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 !!!!!!
Love your humor
Haha thank you!
I'm a new subscriber and thank you for sharing this. ❤
Waiting for more such content 👌👌👌🔥
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 🙂
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 :)
Hi Could you show/share your designs on mobile & desktop applications
Yah this is really powerful.. thanks
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!!
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
5:15 - How to create color tints in Figma
i love this
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.
🔥🔥🔥🔥
Thank you!
Wow, no automation at all? Select all colors 1 by one and then add them 1 by one ... there has to be a better way
Let’s hope Figma puts their $50M+ to good use 😂
@@Mizko I actually just found a super fast way to auto generate. You can use a plugin such as Color Compass to generate the shades/blends. Then rename all of the generated rects with a folder structure and number ie: "primary / $nn" Then select all the rects and use "Generate Styles" with the styler plugin. Boom! All styles created in less than 10 seconds :)
@@BLaBZStation Hey man, thank you so much for this plugin, can I ask, if you still use this plugin for work?
@@vladspace6918 I use the generate styles plug-in all the time! The other one not so much
@@BLaBZStation Thank you for your answer, have a good day :)
lolll "10 shades of gray, not 50."
logged in just to make this comment. appreciate your humor
Sometimes a color grade of 25 is needed.
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'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.
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 ✨
The 50 shades of gray jokes have me rolling 😂 Such a great tutorial and such helpful info!! Keep it up, Mizko!
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.
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.
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
If you haven't watched Part 1 of the Figma Design Series, get on it now 👉 ruclips.net/video/G1xmkQeExJo/видео.html
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.
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?
I went for fishing, but do i have to turn them into components? i mean, how am I gonna use these in future projects?
Light, very Light, super light, ultra light, hyper light, mega light, done!!!
50 shades of gray 🤣🤣
Everyday
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?
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
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!
What naming convention did you use at 8:15 I’m finding it hard to see the text that creates the hierarchy
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?
your videos are amazing! They blew my PAID ui/ux course out of the water 🔥Thank you so much for making them! 🙌
02:27 Look at his reaction 😂😂😂
1year later and this is still super valuable
Can Figma handle Spot Color for color separations?
You are the best teacher! Thank you so much!🥰
1:00 - 10 shades of gray and 5 shades of every other color
When he says "50 Shades Of Grey" He feels that! "mmhmm" 🙃
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
Where is the coupon code?
Pretty cool Mizko, this video was a really game changer for me, God bless you!
Thank you William :) I'm happy to hear!
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
Really you teaches very easy way.
this worked thanks
thanks for the info
First! XD
5:20 I wanna know the shortcuts for when he did 3,4,5 . Someone help me please
Just awesome
Valuable Video
Thank you
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 advices and lessons! god bless you, man
Thank you Maxim!
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. :(
AWESOME!!! at some point I wanted a love button so I could love the video. Thanks a lot👍 I appreciate the good work
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 ?
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
thank you so much !!Helpful!!
✨
Keep the amazing work, i love your videos thank you so much to provide us such an amazing content.
Thanks @mizko . This is informative and very helpful.
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?
as a FE engineer/developer, I love that u mention tailwindcss 🙌
I pressed that subscribe button right after the fishing video lol
had me crackin up 😂
always helpful, informative, & funny!
thanks bro, this is extremely valuable.
love your vibe! thanks Mizko
Very helpful. Thank you miz
Your energie is unbelivable!!!
Thanks so much great work!
Very helpful, straight to the point. Thank You!
Thank you for this Mizko!
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 ;)