Figma Masterclass Course 2024 | Figma Tutorial for Beginners

File file:

Timestamps:
00:00 - What we will be doing?
01:00 - Figma Masterclass
02:40 - Download the follow along file
02:45 - Preparation stage (Setup global styles, components and more)
22:45 - Design stage (Grid system, autolayout, constraints and more)
38:15 - Prototyping stage (Animations, fixed position elements and more)

===

Ultimate Figma Design Masterclass (4,900+ students. 90+ Videos. 10+ hours)

Practical User Research & Strategy Masterclass (NEW!! 100+ students. 8 hours)

Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)

Outline - Figma Wireframe Kit (350+ components and variants)

Sign up to my newsletter for exclusive content:

Follow me on IG (Daily updates):

===

Level up with me:
My Ultimate Figma Design Masterclass (4,200+ students. 90+ Videos. 10+ hours)

[Mizko]

👉Become a Figma Expert & Master and End-to-end UI Design Process in 8 hours with me 👉

[philipperoque]

For anyone confused in the minute 38:36, figma moved the scroll behavior option to the prorotype settings

[charlesbbosa]

Mizko, I transitioned from a decade of Graphic Design to UIUX in 3 months thanks to your content. I am now working on starting a community where I can pass on the same knowledge. That's the impact your work is making around the world. Thank You.

[bocasecamansalamanca]

The difference with Mizko and the rest of tutorials out there is that he actually know what he is doing. Cheers man!
I really appreciate you took the time to put this together for people like us to learn. I am looking forward to serving clients so I can give back to you. Feeling grateful.

[santimatt]

For those asking about the "spacing mode" option not being there, I found that typing "auto" in the "horizontal gap between items" section works!

[klodianamazrekaj]

just finished the tutorial and as a person who cannot finish a course til' the end with this one I just couldn't stop listening and learning along. great work Mizko :)

[vozerova]

I studied design for 4 years and nobody has thought me anything about Figma. I can now honestly say that after following each and every step in this tutorial, I'm much wiser and gained the basics that I have needed for so long. Thank you!

[null]

I started learning ux/ui design just 2 weeks ago. Your videos are helping with a solid start. Thanks for taking your time with them

[winterbae]

Damm, and I’m here thinking auto layout, constraints and prototyping is so hard, you made it look so easy and made my work easier too.
Thanks a lot Mizko🙏

[hinaniayoub_design]

You're the BEST!, please upload more videos like this.

[hnaxf]

As a developer who always wanted to learn designing in Figma, I really learnt a lot today. Thank You Mizko! You are the best!!

[richiechan]

I really enjoyed watching this. This has taught me how to extract elements off a brand's website (in this case, Tesla) and paste them onto Figma canvas. This will be very useful in setting up a design system and when designing a product for a brand without having to wait for the brand to give the designer their brand guide or asset files. Also, I particularly like the 'auto-layout' function which makes workflow efficient and time-saving.

[jayasurya]

Hello Mizko, you are just FANTASTIC. You ACTUALLY know the concepts in depth and I have not found ANY other figma tutorial which is as in depth as yours. One more thing I noticed in you is you are GENUINE. You GENUINELY want to teach us all the professional tricks. I love how obsessed you are with being SYSTEMATIC. Lotss of love and thanks brother. I will mostly join your paid course hopefully. But I will recommend you to anyone and everyone whom I think are in need to learn Figma. Keep going. Keep teaching. <3

[dbbib]

Best Figma tutorial I've watched so far hands down! Diving into UIX design over the last month and a half has been challenging with all extensive information and tricks to better make your designs intentional and effective. But this broke it all down perfectly, in just under 45 mins! Fab stuff

[mohammedsamir]

Loved it Man!!!

A lot of content creators make the mistake of not showing the shortcuts or the buttons they are using. This causes beginners like me to waste 2 hours trying to figure out what did he pressed to perform this specific action. Yesterday a 6 min tutorial turned into a 2.5 hours disaster for me.

Thankfully, you're not one of them. Appreciate how you showed every key and made the tutorial very easy to watch.

[nomadvisualsco]

Thanks for the great tutorial!
To apply the automatic spacing mode in the Auto Layout, now the option is in the dropdown in the “gap” input > select Auto.

[drwheis]

Just commenting to increase engagement. Genuinely one of the best videos I have seen on figma. Thanks a lot!

[ke]

You've done a good job with your tutoring style here as well as your depth. Thanks.

[andreinee]

Mizko, You are such an amazing teacher. I have learnt a lot from following this tutorial. Now I understand how to inspect a website better, auto layout, and components. Thank you and I appreciate your effort.

[herbertpimentel]

This is by far the most comprehensive overview of the power of figma.... I cannot express my gratitude for that ♥