Autoplay
Autocomplete
Previous Lesson
Complete and Continue
The Ultimate Figma Masterclass
Chapter 1 - Welcome
Welcome (1:00)
Install Files (1:46)
Install Plugins (1:35)
Chapter 2 - Figma Project Management
Welcome to Chapter 2 (0:46)
Overview (4:04)
Exploration (1:58)
Wireframes (2:50)
Moodboard (3:39)
Workspace (5:56)
Design Feedback (7:19)
Final Designs (3:33)
Design Implementation (6:49)
Chapter 3 - Master Design Systems
[IMPORTANT] May Updates Summarised (8:55)
[IMPORTANT] Figma's Auto layout Space Between Feature (0:09)
Welcome to Chapter 3 (0:40)
Atomic Design Framework (2:54)
Build Style Guide (Neutrals) (13:33)
Build Style Guide (Dark Mode) (7:39)
Build a Responsive Typgography Scale (19:48)
Responsive Grid Layouts (12:05)
How to use the 4pt Grid (4:02)
Create a 4pt Vertical Grid (2:25)
Build an Icon System (11:38)
Drop Shadows (3:53)
BEM Model & Component Matrix (6:24)
Dynamic & Scalable Buttons (20:32)
Publishing Design System (2:37)
Using Design Systems across Multiple Projects (1:20)
What does B.E.M stand for?
Advanced Input System (Part 1) (11:15)
Advanced Input System (Part 2) (18:14)
Advanced Input System (Part 3) (12:45)
Component Properties (May 2022 Update) (15:52)
Chapter 4 - Master Responsive Design
Welcome to Chapter 4 (0:44)
Understanding the Box Model (5:51)
Understanding Flexbox (4:30)
Which CSS3 Property does Autolayout emulate?
Attach Design System (1:14)
Design a Responsive Header (16:35)
Responsive Hero Banner (11:59)
Responsive Masonary Grid (11:41)
Floating CTA (4:47)
Responsive 4 Col Layout (8:53)
Responsive Footer (12:52)
Adding Prototype Interactions (10:06)
Managing the Design Feedback Process (9:01)
Responsive Views - 1152px (1:13)
Responsive Design - 320px (16:26)
Creating a Responsive Mobile Header (3:22)
Responsive Design - 768px (5:56)
Building a Responsive Prototype (9:08)
Preview designs with Figma Mirror (0:57)
Chapter 5 - Master Figma Components
Welcome to Chapter 5 (0:18)
When to Componentize (1:28)
Global vs Local Components (2:58)
Creating Local & Global Components (7:31)
Deleting Component Variants (0:51)
Modify a Component (0:44)
Create a New Set of Component Variants (3:52)
Publishing Components Taking Forever Workaround (0:56)
Detach Main Component (1:26)
Master Components (4:59)
Prevent Master Components from Publishing (2:40)
Chapter 6 - Design Implementation
Welcome to Chapter 6 (0:25)
Compressing Images (2:06)
How to Run a Design Implementation Walkthrough (4:41)
Compressing Images - FREE High Quality Alternative (2:07)
Preparing a file for developers (7:09)
Documenting designs for developers (13:12)
Exporting SVG icons (8:34)
Exporting PNG Icons (4:30)
Chapter 7 - Bonus Challenges
Welcome to Chapter 7 (0:35)
Build a Responsive 2 Column Layout (6:04)
Build a Responsive Table (4:44)
Create a Grid Box (4:32)
Build a Scalable Progress Bar (3:46)
Chapter 8 - Prototyping & Animations
Chapter Overview (1:46)
[FILE DOWNLOAD] Smart Animate Overview (15:08)
Animation Types (Presentation) (5:52)
Animation Type (Exercise) (18:05)
Easing the Easy Way (8:04)
Figma Animation Prototype (6:01)
Custom Transitions (16:47)
Final Challenges (Part 1) (7:56)
Final Challenges (Part 2) (4:28)
Final Challenges (Part 3) (10:03)
[MUST WATCH] Intro to Part 2 (2:37)
Design a Sidebar & Loading State (11:44)
Design a Dashboard (15:06)
Design the Customer View (Rows) (11:08)
Design the Customer View (Grid) (6:48)
Design the Add New Customer Modal (6:14)
Design the Success Message (7:07)
Plan your Prototype Sequence (8:07)
Build your Prototype (11:02)
Interactive Components Challenge 001 (8:30)
Interactive Components Challenge 002 (8:56)
Variables for Design Systems
What are Figma variables (2:34)
Download Exercise Files
Warmup challenges! (25:51)
When do we use Variables in Figma? (2:39)
How are Figma variables different to Styles and why are they important- (2:21)
Introduction to the Variables project (0:39)
How to structure your variables for a Design System (35:41)
Proper naming conventions for Primitive & Semantic (Alias) Variables (7:20)
Variables for a Design System Project Walkthrough (3:41)
Convert your Color styles to Primitive Variables (5:02)
Convert your Spacing units to Primitive Variables (8:22)
Convert your Corner Radius to Primitive Variables (4:57)
Convert your typography styles to Variables (18:42)
Create your Semantic Variables (29:34)
Link up your designs with variables (12:55)
Create a dark mode view with variables (10:03)
We value your feebdack!
Advanced Prototyping
Welcome to Dynamic Prototyping (1:58)
Download Exercise Files
A - Introduction to Variables + Conditional Statements (11:12)
B - Introduction to Variables + Conditional Statements (6:32)
C - Introduction to Variables + Conditional Statements (7:04)
D - Introduction to Variables + Conditional Statements (11:17)
What are conditional statements in Figma- (3:14)
When should you start using conditional statements (3:21)
Dynamic dropdown (10:54)
Image editor app (33:18)
Build a dynamic checkout experience (66:19)
We value your feebdack!
Congratulations!
Want to keep learning?
Final Message ✨ (1:34)
When do we use Variables in Figma?
Complete and Continue