fbpx

The Ultimate Figma & UI Masterclass

End-to-end UI Design & Figma Course. 70+ videos on Advanced File & Project Management, Design Systems, UI Design Processes, Responsive Design & more.
900+ Figma Masters made!

What is included:

  • 7+ hours of action-packed video content (70+ videos)
  • End-to-end file and project management
  • UI design principles and frameworks
  • Build a Figma design system
  • Responsive UI design with advanced techniques
  • Step-by-step walkthrough of design hand-over process
  • Unlock resources: A real client project file, Handover presentation template and a Project starter file.
  • Lifetime updates: 2 new chapters coming!
$98
$158
Early bird discounts applied!

What is included:

  • 7+ hours of action-packed video content (70+ videos)
  • End-to-end file and project management
  • UI design principles and frameworks
  • Build a Figma design system
  • Responsive UI design with advanced techniques
  • Step-by-step walkthrough of design hand-over process
  • Unlock resources: A real client project file, Handover presentation template and a Project starter file.
  • Lifetime updates: 2 new chapters coming!
$98
$158
Early bird discounts applied!

A message from Michael

120 seconds of pure action.

Figma course overview

Michael has taught over 40,000+ hours of free Figma tutorials to 500,000+ people from all over the world. In this course you will learn advanced file and project management processes, how to design and build a design system from scratch, how to build an advanced responsive prototype, lots of UI design principles and ultimately tips, tricks and processes on the design handover implementation workflow.

  • Students: 900+
  • Difficult level: Beginner to Intermediate
  • What’s not included: Figma basics. I’ve already taught all of it for free 😉
  • How does it work? Immediate access. Complete in your own time.
  • Student rating: (57 reviews)

Why should I take this Figma course?

  • The world’s first ‘real-world’ design course with Figma
  • Advanced file management and organisation for an end-to-end design process
  • Step-by-step process on building a design system with some advanced techniques (from scratch)
  • Mastering Responsive UI design with advanced Autolayout techniques
  • An advanced and systematic way to designing Web & UI design
  • Exact walkthrough of how to present and walkthrough designs with stakeholders
  • Preparing designs for implementation and developers
  • My exclusive design walkthrough, feedback and project templates.

Course resources included

  • Certificate upon completion
  • Figma Project starter template
  • Figma Presentation templates
  • Figma design system demo file
  • Figma Exercise solution file
  • A real client project file (Documented)

Why should I take this Figma course?

  • The world’s first ‘real-world’ design course with Figma
  • Advanced file management and organisation for an end-to-end design process
  • Step-by-step process on building a design system with some advanced techniques (from scratch)
  • Mastering Responsive UI design with advanced Autolayout techniques
  • An advanced and systematic way to designing Web & UI design
  • Exact walkthrough of how to present and walkthrough designs with stakeholders
  • Preparing designs for implementation and developers
  • My exclusive design walkthrough, feedback and project templates.

Course resources included

  • Certificate upon completion
  • Figma Project starter template
  • Figma Presentation templates
  • Figma design system demo file
  • Figma Exercise solution file
  • A real client project file (Documented)

About your instructor

Over the last 14 years, Michael (better known as Mizko) has been an in-house and freelance designer, agency owner, mentor and educator. He has helped strategise, design and launch over 100+ products, helping them raise over $500M+. Throughout his previous agencies, he has generated over $5M+ in sales through UI, UX and Branding design work.

You can learn more about him on:

A message from Michael

120 seconds of pure action.

Some of our master students:

What’s in this course?

Chapter 1 - Welcome

  • Welcome
    01:00
  • Install Files
    01:47
  • Install Figma Plugins
    01:36

Chapter 2 - Figma Project Management (Real Project)

  • Welcome
    00:46
  • Overview
    04:06
  • Exploration
    01:59
  • Wireframes
    02:51
  • Moodboard
    03:42
  • Workspace
    06:01
  • Design Feedback
    07:20
  • Final Designs
    03:34
  • Design Implementation
    06:50

Chapter 3 - Master Design Systems

  • Welcome
    00:40
  • Atomic Design Framework
    02:54
  • Build a Scalable Color System (Neutrals)
    13:33
  • Build a Scalable Color System (Dark Mode)
    07:39
  • Build a Responsive Typography Scale
    19:49
  • Responsive Grid Layouts (320px to 1440px, Including Fixed Sidebars)
    12:10
  • How to Use the 4pt Grid
    04:03
  • Create a Vertical 4pt Grid
    02:26
  • Build an Advanced Icon System (4 Sizes, 2 Colors)
    11:39
  • Build a Drop Shadow System
    03:53
  • Master the BEM Model & Component Matrix
    06:24
  • Build a Dynamic & Scalable Button Set
    20:24
  • Publish a Design System
    02:37
  • Using Design Systems Across Multiple Projects
    01:21
  • Advanced Input Systems (Part 1)
    11:16
  • Advanced Input Systems (Part 2)
    18:15
  • Advanced Input Systems (Part 3)
    12:45

Chapter 4 - Master Responsive UI Design

  • Welcome
    00:45
  • Understanding the Box Model
    05:51
  • Understanding the CSS Flexbox
    04:30
  • Attaching a Design System
    01:14
  • Design a Responsive Header
    16:35
  • Design a Responsive Hero Banner
    11:59
  • Design a Responsive Masonry Grid
    11:42
  • Design a Responsive Floating CTA
    04:49
  • Design a Responsive 4 Col Layout
    08:55
  • Design a Responsive Footer
    12:54
  • Adding Prototype Interactions
    10:07
  • Managing the Design Feedback Process
    09:02
  • Responsive Views - 1152px
    01:13
  • Responsive Views - 320px
    16:26
  • Designing a Responsive Mobile Header
    03:23
  • Responsive Views - 768px
    05:56
  • Building a Responsive Prototype
    09:08
  • Preview Designs with Figma Mirror
    00:57

Chapter 5 - Master Figma Components

  • Welcome
    00:19
  • When should you Componentize?
    01:28
  • Global vs Local Components
    02:59
  • Creating Local & Global Components
    07:32
  • Deleting Component Variants
    00:52
  • Modifying a Component
    00:44
  • Creating a New Set of Component Variants
    03:53
  • Publishing Large Design Systems Workaround
    00:57
  • Detaching Main Components
    01:27
  • Master Components
    05:00
  • Prevent Master Components from Publishing
    02:40

Chapter 6 - Design Implementation ("Design Handover")

  • Welcome
    00:25
  • Compressing Images
    02:27
  • Compressing Images - FREE & High Quality Alternative
    02:08
  • How to Run a Design Implementation Walkthrough
    04:41
  • Preparing a File for Developers
    07:09
  • Documenting Designs for Developers
    13:13
  • Exporting SVG Icons
    08:35
  • Exporting PNG Icons
    04:31

Chapter 7 - Bonus Challenges

  • Welcome
    00:36
  • Build a Responsive 2 Column Layout
    06:05
  • Build a Responsive Table
    04:44
  • Create a Grid Box
    04:32
  • Build a Scalable Progress Bar
    03:46

Congratulations!

  • Final Message ✨
    02:14

🚧 Figma Animations (Upcoming)

  • FREE! Lifetime updates for existing students

🚧 Figma Prototyping (Upcoming)

  • FREE! Lifetime updates for existing students

Words from the students

I am a self-taught UX Designer and used to heavily rely on Instagram carousels, YouTube, and blog posts for growing my knowledge. I would follow Mizko’s IG and had great expectations of this course. True to my expectations, I learned what I wanted to and more! This course was an eye-opener when it comes to good design practices, tips, tricks, and efficient collaboration/work. Essentially the way I approach UI design has changed for the better. I am amazed at the amount of effort and attention to detail that went into this course and commend Mizko for that. The course is ‘designed’ to not just theoretically teach us concepts but also to enable us with lifelong practices.

Last but not least, the way Mizko delivers lessons is similar to how a friend is speaking with you — always fun, never a snoozefest (with a sprinkle of humor). Overall, this course was exactly what I needed for building my skillset.

Ipshita C
Senior UX Designer
Verified student

It is a comprehensive guide for all you need to know about Figma! The course gives me a better scope of how a project would look in the real world. I love the approach from Mizko trying to teach us how to ‘fish’ and setting us up for challenges. I have learned so much from this course, and 10/10 would recommend it to everyone!

Meg Ong
Junior UX Designer
Verified student

This is the best course if you want to level up your Figma skills and project management. I found a lot of information that I’ve implemented to my working process, and it was a game-changer for me. Thank you for this fantastic masterclass!

Anna M
UX Designer
Verified student

Michael’s Figma Masterclass course was exactly what I needed to go from zero to hero! One of the best takeaways for me is how to document prototypes to work with developers. It’s something that’s a big work in progress for me, and I am glad I invested in the course.

Best money spent this year!

David Q
Growth Manager @ Eucalyptus
Verified student

A big shoutout to Michael for this Figma Masterclass course!! As a software engineer and founder of SmartWriter, I’ve always struggled with Figma and how we can create more efficient workflows between design and development.

This course answered all our questions and we’ve already implemented his responsive workflow within our team!! Huge time saver.

Thank you for all the resources as well!

Vaibhav N
Founder @ SmartWriter
Verified student

This is not just a technical course teaching how to use Figma functionality-wise. It is an end-to-end UX/UI design masterclass course in which Mizko shares every single step of the way why and how he does something during the entire design process in great detail. There are so many valuable design principles and tips in the course. I am learning a lot here and there. This is the course I wish I had on day one of my design career.

Thanks again, Mizko for sharing the best gems out of his years of expertise like he always does.

Junnan M
Senior UX/UI Designer - KPMG
Verified student

Mizko! Thanks again for your hard work on this masterclass. I’m only 30 minutes in and I already know this is going to make my life easier at work.

Definitely keen for new courses as well. This is classic. Thanks so much again.

Jaeho
UX/UI Designer
Verified student

Love the YouTube channel and course I just recently purchased it 🙂 looking forward to tidying up my Figma skills and especially the handover (lack of a better word) techniques and getting myself organised. Keep the material going, love the delivery of the program kudos to you it’s a lot of handwork. Take care and stay safe and well.

Binu P
Experience Architect & Design Engineer
Verified student

I knew I’d learn a lot from this course when I joined- but man, I was blown away. I learned so much about configuring effective and efficient auto layouts, not to mention a streamlined process into turning those auto layouts into responsive pages.

I learned how to efficiently create and organize a design system for multiple projects. The best part is that the whole curriculum is based off of a real project, so you are shown how and why he makes the choices he does throughout the entire process.

Danny B
UX Designer
Verified student

This is the best course to learn all about Figma, UI and project management! (As we designers know, it can get really messy due to the iterations in our projects). I highly recommend anyone who’s looking to learn all about Figma to check Michael’s YouTube channel to get the basics, and then jump right into the Masterclass. The Masterclass is a value bomb and definitely worth it as it’s going to save you so much time when you are designing. I’m halfway through the course and before even finishing it, I can surely suggest this to anyone looking to master Figma and speed up your workflow! 💯

Thank you Micheal, for making such a great course! 🙌🏼

Pranavi C
UX/UI Designer
Verified student

I learnt a lot from the course and now I’m damn sure that the deliverables to the clients will be much more professional and efficient from my side! Thanks a lot for releasing this course Michael!

Sarthak K
UX Designer
Verified student

As someone who’s completely new to Design and Figma, I was having a lot difficulty with my messy files. I started out and I literally would have everything one one page. I’d also be wasting a lot of time not using components or variants. So I’ve learned so much from you, and it’s really made learning more fun.

Ramata C
UX Designer
Verified student

I started the Ultimate Figma & UI Masterclass yesterday to step up my game and keep learning,
I’m impressed with the work.

Loving it! I dug deep into the UX field and afterward started to study on my own UI, I needed a push, I follow Mizko on socials and he really is an inspiration source. Great work on your whole thing here, keep it up!!

Amit H
UX Designer
Verified student

The Ultimate Figma & UI Masterclass is unquestionably an outstanding course for those who aspire to be at the top of their game. Mizko’s passion to teach and mastery in the subject matter comes through with clarity and precision. He possesses a deep understanding of the principles which are relayed beautifully in the projects with step by step instructions & examples.

His delightful manner will keep you engaged, motivated, deeply focused and there is an abundance of encouragement from chapter to chapter that will keep you progressing through the course material at an accelerated pace.

My confidence has sky-rocked since and I can’t wait for the next series of courses the Mizko Universe has to offer. This course is vital!

Bina T
UX Designer
Verified student

I love, love, love the masterclass. Straight to the point. Clear, precise and I can feel this is going to help me out a lot!

Ken U
UX/UI Designer
Verified student

Today I started Michael Wong course, The Designership, focused mainly on #Figma (UI) and I must say that it is quite impressive, not only for the way and passion with which he explains but because in just three chapters I have discovered new things, which makes me excited and eager to move forward to know what else I can discover.

Lex T
UX Designer
Verified student

The Ultimate Figma + UI Masterclass is a must-do regardless of your experience. It filled a bunch of gaps in my process, the kind of gaps you develop when you’re self taught in a tool.

Extremely detailed and refreshingly logical. All aspects of your process was covered.

James O
UX/UI Designer
Verified student

Become masterclass approved

PROUDLY AWARDED TO:

FOR THE COMPLETION OF THE ULTIMATE FIGMA MASTERCLASS

Unlock immediate access to resources

With The Ultimate Figma Masterclass you will gain immediate access to all the exclusive templates and files that are included in this course. This includes the source file to a real design project, a custom built project starter file (heavily componentized), a presentation template and all solution files for all the exercises.

Gain access to a real design project file

As part of this Figma design course, you will get direct access to a 5-day-design-sprint Figma file. From here you will be able to learn and assess Michael's end-to-end workflow with all the final assets.

Get access to the Designership community

As a student you will get exclusive access to the Designership where you can meet, share and learn with other Figma designers from all around the globe. This is a safe place to ask all your Figma questions related to the course and also receive updates as we continue to update curriculums with additional and updated content.

Frequently asked questions

Can I get a refund?

We don’t accept refund requests unless it is stated clearly on a sales page.

We apologise for the inconvenience but please understand that once a purchase has been made; and the resources have been downloaded or the course secrets have been learnt – it lives with you forever.

Instead of requesting a refund, we highly encourage you to ask questions, make the most of your engagement within the community and leverage the new product or knowledge to your advantage!

What currency is this course sold in?

USD

Do I receive a tax invoice?

The receipt you receive is acceptable for tax purposes.
It has all the information you need to claim it as an expense for your business/student expenses.

You can learn more about your receipt here.

What type of Figma licence do I need?

You will need a Figma Professional membership to complete this course. If you are a student, you can apply for the Figma Education licence which a number of our students have successfully done so.

Why do I need a Professional Figma account?

This is due to Figma’s pricing packages. On a Free Figma plan, you are limited to only 3 design files and you are not permitted to publish a design system either. This course includes 9 files and you will also learn to create a design system from scratch. Without the pro plan, you won’t be able to access all the files or complete the course.

Copy link
Powered by Social Snap