Ultimate Figma Masterclass Course by Michael Wong, What Is It Included (Content Proof: Watch Here!)  

Ultimate Figma Masterclass Course
Master Figma with industry-leading tactics that will help you complete projects with confidence.

Overview
 
Inclusion
10+ hours of content
90+ lessons

What you'll learn

• Interactive prototyping
• Front-end development concepts
• Figma plugins
• Auto Layout
• Interactive components
• Project organization and management
• UI kits and design systems
• Advanced components deep-dive
• Responsive designs
• Design handover

Requirements

• Figma account (Educational or Professional).
• A laptop or desktop with steady internet access.
• A beginner's understanding to Figma.
• A passion and desire to learn!

Course description

The UX/UI design industry is highly competitive, and staying ahead requires mastery of industry-leading tools like Figma.

‍This course is designed to transform you into a Figma expert, teaching you everything from basic functionalities to advanced techniques such as design systems, components, prototyping, project workflow management, and designer handoff.

‍Unlike courses that focus solely on theory, this Figma course emphasizes practical learning. You'll engage with a real design project, applying the right tools and techniques to make your work in Figma more efficient and effective.

‍By the end of this course, you will be equipped to:

• Manage projects efficiently: Set up your workspace, organize files, and ensure smooth project handovers.
• Master design systems and UI kits: Deepen your understanding of design systems to speed up design iterations and project turnovers, allowing you to execute projects quickly and consistently.
• Deep dive into Figma components: Learn best practices for componentizing your designs to enhance your workflow speed.
• Develop responsive designs: Create adaptively for a global audience, building responsive components that work seamlessly across all platforms.
• Create prototypes and animations: Bring your designs to life with interactive flows and animations, making your ideas more compelling to stakeholders.
• Handover designs seamlessly: Simplify collaboration with developers by integrating real code references into your handover documents, helping to accelerate project launches.

This course offers more than skill enhancement; it provides the industry leading insights, processes and tactics needed to excel in the real world as a UX/UI designer.

Who should take this course?

• Beginners and junior designers: If you're new to Figma or looking to advance your skills, this course will significantly boost your career in UX/UI design by providing a solid foundation in one of the most crucial design tools in the industry.
• Senior Designers: Stay on top of the latest updates with Figma. 
• Product Managers: Gain insights into your designers' processes so you can better collaborate with them to get projects across the line quicker.
• Career Transitioners: Facilitate a smooth shift to a career in UX/UI design by learning essential skills and best practices in one of the most sought-after design tools.
• Freelance Designers: Enhance your earning potential and land more jobs as this Figma course not only teaches the best practices in terms of technicalities, but an end-to-end process for completing a project from start to finish in Figma.

What to expect from a Designership courses

• ESYR Learning
  Explain, Show, You, and Review. Our innovative approach makes learning fun and immersive.
• ndustry Expert-Led
  Our products and courses have been crafted by an expert with over a decade's experience.
• Practical & Hands-on
  Develop your skills from both theory and applied learning exercises to set you up for success.
• Proven Track Record
  We’ve helped designers worldwide succeed, from landing dream jobs to getting higher freelance rates.
  Highly Rated
  With an impressive 4.9/5 rating, the impact of our courses and products is clear.
  
  

Curriculum

9 Modules

• Warm Welcome!
  L01 A warm welcome to all students
  L02 Install Files
  L03 Install Figma Plugins
• Figma Project Management (Real Project)
  Let's start your learning journey with the basics: Project Management. Before diving into advanced techniques in Figma, learn how to manage your files and assets for your projects efficiently and organize your workspace effectively.
  L01 Welcome
  L02 Overview
  L03 Exploration
  L04 Wireframes
  L05 Moodboard
  L06 Workspace
  L07 Design feedback
  L08 Final Designs
  L09 Design Implementation
• Master Design Systems
  Your end-to-end learning module for design systems. From building your design systems to publishing them in Figma, this module taps into utilizing the Atomic Design Framework, BEM Model, and Component Matrix to let you build advanced Figma components suitable for designers and applicable to developers.
  L01 Welcome
  L02 Atomic Design Framework
  L03 Build a Scalable Colour System (Neutrals)
  L04 Build a Scalable Colour System (Dark Mode)
  L05 Build a Responsive Typography Scale
  L06 Responsive Grid Layouts (320px to 1440px, Including Fixed Sidebars)
  L07 How to Use the 4pt Grid
  L08 Create a Vertical 4pt Grid
  L09 Build an Advanced Icon System (4 Sizes, 2 Colours)
  L10 Build a Drop Shadow System
  L11 Master the BEM Model & Component Matrix
  L12 Build a Dynamic & Scalable Button Set
  L13 Publish a Design System
  L14 Using Design Systems Across Multiple Projects
  L15 Advanced Input Systems (Part 1)
  L16 Advanced Input Systems (Part 2)
  L17 Advanced Input Systems (Part 3)
• Master Responsive UI Design
  Utilize key Web Development principles such as the Box Model and Flexbox to make informed project design choices. This module dives into creating responsive UI designs that teach how to create designs your developers can easily understand. Also, learn the step-by-step process of using Autolayout.
  L01 Welcome
  L02 Understanding the Box Model
  L03 Understanding the CSS Flex box
  L04 Attaching a Design System
  L05 Design a Responsive Header
  L06 Design a Responsive Hero Banner
  L07 Design a Responsive Masonry Grid
  L08 Design a Responsive Floating CTA
  L09 Design a Responsive 4 Col Layout
  L10 Design a Responsive Footer
  L11 Adding Prototype Interactions
  L12 Managing the Design Feedback Process
  L13 Responsive Views - 1152px
  L15 Responsive Views - 320px
  L14 Responsive Views - 768px
  L16 Designing a Responsive Mobile Header
  L17 Building a Responsive Prototype
  L18 Preview Designs with Figma Mirror
• Master Figma Components
  Create, modify, and publish components in Figma in this module. Get a deeper understanding of when to use Figma components in your UI design. Learn the difference between Local and Global components, and apply your knowledge from the previous modules to make Figma component sets that you can utilize in your designs.
  L01 Welcome
  L02 When should you Componentize?
  L03 Global vs Local Components
  L04 Creating Local & Global Components
  L05 Deleting Component Variants
  L06 Modifying a Component
  L07 Creating a New Set of Component Variants
  L08 Publishing Large Design Systems Workaround
  L09 Detaching Main Components
  L10 Master Components
  L11 Prevent Master Components from Publishing
• Design Implementation ("Design Handover")
  Prepare your project for design implementation and developer handover. Learn how to export icons and compress your images in Figma for design export and get access to a free high-quality alternative in the process.
  L01 Welcome
  L02 Compressing Images
  L03 Compressing Images - FREE & High Quality Alternative
  L04 How to Run a Design Implementation Walkthrough
  L05 Preparing a File for Developers
  L06 Documenting Designs for Developers
  L07 Exporting SVG Icons
  L08 Exporting PNG Icons
• Bonus Challenges
  Challenge yourself to create responsive tables, columns, grid boxes, progress bars, and more. Apply the best practices you've learned from the previous modules to build responsive designs successfully. Step-by-step module materials are available to assist you in the process.
  Access tips and solutions within your Figma course file to help you guide as you take on this exercise.
  L01 Welcome
  L02 Build a Responsive 2 Column Layout
  L03 Build a Responsive Table
  L04 Create a Grid Box
  L05 Build a Scalable Progress Bar
• Prototypes & Animations
  Understand the flows and interactions within your design and learn about Prototyping and Smart Animation in this module. Gain significant knowledge of the fundamentals of Smart Animate, storyboarding, end-to-end prototyping, and interactive components.
  This module includes a file download for the starter and solution of Smart Animate.
  L01 Chapter Overview
  L02 Smart Animate Overview
  L03 Animation Types
  L04 Animation Types (Exercise)
  L05 Easing the Easy Way
  L06 Figma Animation Prototype
  L07 Custom Figma Transitions
  L08 Final Challenges (Part 1)
  L09 Final Challenges (Part 2)
  L10 Final Challenges (Part 3)
  L11 Intro to Part 2
  L12 Design a Sidebar & Loading State
  L13 Design a Dashboard
  L14 Design a Customer View (Rows)
  L15 Design a Customer View (Grid)
  L16 Design the Add New Customer Modal
  L17 Design the Success Message
  L18 Plan your Prototype Sequence
  L19 Build your Prototype
  L20 Interactive Components Challenge (Part 1)
  L21 Interactive Components Challenge (Part 2)

Instructor
Michael Wong
Founder of Designership & z0 Studio
Mizko, also known as Michael Wong, brings a 14-year track record as a Founder, Educator, Investor, and Designer. His career evolved from lead designer to freelancer, and ultimately to the owner of a successful agency, generating over $10M in revenue from Product (UX/UI) Design, Web Design, and No-code Development. His leadership at the agency contributed to the strategy and design for over 50 high-growth startups, aiding them in raising a combined total of over $400M+ in venture capital.

Notable projects include: Autotrader (Acquired. by eBay), PhoneWagon (Acquired by CallRails), Spaceship ($1B in managed funds), Archistar ($15M+ raised) and many more.

Testimonials

Quality of content 94%
Supportive learning material 100% 
Ease-of-following 100%
Instructor 98%
New knowledge learnt 98%
Would recommend the course 98%

Rachel Gogos
Figma Course
This is a great course for anyone that is just starting out on Figma! Mizko is a great instructor that will walk you through each lesson, provide challenges and encouragement to keep you motivated and attentive. The approach is hands-on which allows the student to retain the lesson better than just watching videos of someone doing the work for you.