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

11 ай бұрын

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

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

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.

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

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

2 жыл бұрын

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! 🙌

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

2 жыл бұрын

me tooo

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

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

3 жыл бұрын

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!

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 ;)

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

@Mizko

2 жыл бұрын

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

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. 🔥💯

Great tips, thanks for sharing Mizko!

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

Very helpful, straight to the point. Thank You!

love your vibe! thanks Mizko

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

@Mizko

2 жыл бұрын

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

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

Thanks @mizko . This is informative and very helpful.

Thank you for this Mizko!

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!

@Mizko

3 жыл бұрын

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.

Full of awesomeness!😍

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

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

thank you for this series !

Waiting for more such content 👌👌👌🔥

great advices and lessons! god bless you, man

@Mizko

Жыл бұрын

Thank you Maxim!

Very helpful. Thank you miz

Thank you for your videos. It helps me alot

Your energie is unbelivable!!!

love it. new sub!!

Great tutorial 👏

Thanks so much great work!

So much Cooool Bro!!!

1year later and this is still super valuable

Yah this is really powerful.. thanks

Liking it before even watching the video 🔥

@Mizko

3 жыл бұрын

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

Thanks Miz!

thanks bro, this is extremely valuable.

It was extremely helpful

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

thank you so much !!Helpful!!

@Mizko

3 жыл бұрын

✨

Really you teaches very easy way.

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

Just awesome

love it!

@Mizko

3 жыл бұрын

Thank you!

If you haven't watched Part 1 of the Figma Design Series, get on it now 👉 kzread.info/dash/bejne/eWWsz82KlajeetI.html

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

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

@Mizko

2 жыл бұрын

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

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!

Valuable Video

this worked thanks

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

3 жыл бұрын

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

thanks for the info

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.

i love this

Smashed that button before watching the video

@Mizko

3 жыл бұрын

Haha! Love the support Raei!!

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

CTRL C to quickly pull to color picker 😉

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.

Love your humor

@Mizko

3 жыл бұрын

Haha thank you!

Thank you

I pressed that subscribe button right after the fishing video lol

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 ?

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

@Mizko

2 жыл бұрын

Ha! Thank you. Glad you’ve enjoyed

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

🔥🔥🔥🔥

@Mizko

2 жыл бұрын

Thank you!

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

2 жыл бұрын

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

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

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

@ahruf

2 жыл бұрын

The answer is in the video

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?

Can Figma handle Spot Color for color separations?

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

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

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 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?

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

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

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

@Mizko

3 жыл бұрын

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

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 !!!!!!

02:27 Look at his reaction 😂😂😂

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?

@Mizko

3 жыл бұрын

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

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

3 жыл бұрын

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

3 жыл бұрын

@@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 🙂

When is part 3 release date?

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

2 жыл бұрын

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

2 жыл бұрын

@@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

2 жыл бұрын

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

2 жыл бұрын

@@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

2 жыл бұрын

@@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.

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

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?

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

@Mizko

3 жыл бұрын

Yep!

@MaxWeir

2 жыл бұрын

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

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..

@mksuenone

3 жыл бұрын

Im working on a Checklist . But it doesnt work.

Where is the coupon code?

5:15 - How to create color tints in Figma

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

@Mizko

3 жыл бұрын

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

@oussamabouyardane2431

3 жыл бұрын

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

@oussamabouyardane2431

3 жыл бұрын

@@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!!

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