fbpx

The Ultimate Figma Masterclass

End-to-end Figma Masterclass course. Packed with 90+ videos. 10+ hours of practical video content.

(110+ reviews. 1,800+ happy designers)

Join 1,800+ designers in becoming a Figma Master

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.
  • Beginner - Intermediate
  • 90+ videos
  • 10+ hr
Designers from startups to enterprise
Course Details

What you’ll learn from 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:36
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
Chapter 8 - Prototypes & Animations
Chapter Overview
01:46
Smart Animate Overview
15:08
Animation Types
05:52
Animation Types (Exercise)
18:05
Easing the Easy Way
08:04
Figma Animation Prototype
06:01
Custom Figma Transitions
16:47
Final Challenges (Part 1)
07:56
Final Challenges (Part 2)
04:28
Final Challenges (Part 3)
10:03
Intro to Part 2
02:37
Design a Sidebar & Loading State
11:44
Design a Dashboard
15:06
Design a Customer View (Rows)
11:08
Design a Customer View (Grid)
06:48
Design the Add New Customer Modal
06:14
Design the Success Message
07:07
Plan your Prototype Sequence
08:08
Build your Prototype
11:02
Interactive Components Challenge (Part 1)
08:30
Interactive Components Challenge (Part 2)
08:56
Congratulations!
Final Message ✨
02:14
Course Details

What you’ll learn from this course

Course overview:
  • 10+ hours of action-packed video content (90+ videos)
  • UI design principles and frameworks
  • Build and maintain a design system from scratch
  • Learn advanced responsive UI design techniques
  • Step-by-step walkthrough of design hand-over process
  • File and project management
  • Prototyping and animations
  • Unlock resources: A real client project file, Handover presentation template and a Project starter file.
Buy now

$150

Bonus material and resources included in this course:

Certificate upon completion
Figma Project starter template
Figma Presentation templates
Figma design system demo file
Figma Exercise solution file
Real documented client project file
Lifetime updates on new modules

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:

CERTIFICATION

Become Designership certified.

All students who complete the course curriculum are awarded with a designership signed certificate from our instructor, Michael Wong.

Proudly awarded to:
👉 Hit enter when you are done!
THIS IS A DEMO
COMPLETION DATE
TESTIMONIALS

Real designers, real reviews

A growing collection of our real-world courses and products that can level you up instantly. A growing collection of our real-world courses and.

Our student reviews

Read all reviews
Evan J. UX Designer
Verified student

The biggest challenge an older designer faces is the ability to learn new tools and apply its experiences. Figma Masterclass provided the creative support to lift my doubts of achieving my goals. The greatest reward I received from this course. I was able to impress a potential employer by auditing their current product with just few changes to become top candidate to join their team. Thank you Michael you have lifted me above the mist that swallows a designer facing Ageism.

Randy B. UX Designer
Verified student

This course places emphasis on workflow efficiency and end-to-end thinking from ideation to implementation. The great thing is that Mizko focuses on a systematic approach and dives into maximizing the tools at our disposal to efficiently get the job done well. All this delivered through his optimistic, encouraging, and contagious energy. 🙏🏾

Ben M. UX Designer
Verified student

If you’re someone who wants to learn, develop and truly master your design skills in Figma and UX/UI, then this course is the real deal. It’s designed and structured to take you through a real world project and design process that you’ll also get to apply throughout this course, enhancing what you learn in a practical way by actually doing it. what’s makes it even sweeter is having access to a great community of designers to connect with and resources available which is a huge bonus to your learning.

If you’re self-taught, new to UI design or Figma like myself, this will cut down your learning curve significantly. Mizko’s free YouTube content combined with this course will make you a pro in UI design and Figma in no time.

Mastering design systems and auto-layout to create responsive designs is a game changer! You’ll quickly see the value once you start and your level of confidence and understanding in the design process would’ve reached new heights by the time of completion. 100% recommend investing in this course. It was invaluable. Thank you Michael!

Candice Y. UX Designer
Verified student

This course has been a gem! It draws on each section very clearly and in a simplified way where it is easy to understand. He explains the not just the how to do, but also the why – which makes you grasp the concept more strategically. I use some of these tips and tricks for my current work, which makes my workflow so much more efficient and effective. Thank you so much Mizko for all the work and teachings. Highly recommend! 👏🏻

Ipshita C Senior UX Designer
Verified student

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.

Meg Ong Junior 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!

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

David Q Growth Manager @ Eucalyptus
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!

Vaibhav N Founder @ SmartWriter
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!

Junnan M Senior UX/UI Designer - KPMG
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.

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!

Do you provide an educational discount?

We offer a 30% discount for students with a valid ID and proof of eligibility. Just shoot us an email at mizko@designership.com before purchasing!

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

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.

Copy link
Powered by Social Snap