Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Figma Mastery
Files & Resources
Video Course Demo File
Figma (Pro) Assignments File
100+ Must-know Figma Shortcuts
100+ Must-have Figma Plugins
Start Here
Watch the Basics first (Link)
Prerequisites (1:17)
Module Assignments Solutions (9:14)
Test Your Knowledge Assignments Solutions (16:48)
2023 Features Update (7:46)
2024 Features Update (UI3)
Using Plugins in Figma (Artboard Studio Demo) (5:11)
Advanced Layers and Shapes
Analyzing Designs with Figma in Mind (22:26)
Layers, Groups, and Frames (8:25)
Everything’s a Box (9:15)
Keeping Layers in Place (3:20)
Positioning and Constraints (7:54)
Repositioning and Spacing Tips (2:16)
Advanced Shape Manipulation (5:52)
Advanced Masking (7:00)
🕵️ Module Assignments Solutions (23:58)
🕵️ Final Module Assignment 1 Solution (14:58)
🕵️ Final Module Assignment 2 Solution (14:21)
🕵️ Final Module Assignment 3 Solution (11:48)
Iconography in Figma
Vectors and Rasters (2:19)
Analyzing Icons (5:08)
Benefits of Using an Icon Grid (2:42)
What to Consider (6:18)
Modifying Icons (14:29)
Creating Icons (Part 1) (5:05)
Creating Icons (Part 2) (8:09)
🕵️ Module Assignments Solutions (32:16)
🕵️ Final Module Assignments Guide (4:11)
Using Photos and Illustrations in Figma
Tips on Finding Assets (4:18)
Adding Assets to Figma (8:01)
Copying Frames as PNGs (3:27)
How to Pick Visuals (14:26)
Using Images in Your Designs (11:22)
Adjusting Images and Blend Modes (9:06)
Adjusting Illustrations (4:50)
🕵️ Module Assignments Solutions (29:55)
🕵️ Final Module Assignment (12:05)
Grids & Layouts in Figma
Grid Basics (8:01)
Controlling Grids in Figma (10:59)
Mobile Grids (24:40)
Tablet Grids (3:20)
Desktop Grids (14:06)
Figma Grids Tips and Tricks (9:54)
🕵️ Module Assignments Solutions (10:34)
🕵️ Final Module Assignment Guide (5:04)
Practical Auto Layout
Auto Layout Basics (5:06)
Advanced Auto Layout (7:19)
Follow Along: Mobile App Bottom Sheet (23:28)
Follow Along: Table (17:21)
🕵️ Module Assignment Solutions – Part One (Basics) (18:49)
🕵️ Module Assignment Solutions – Part Two (Mastery) (11:22)
🕵️ Module Assignment Solutions – Part Three (Mastery) (10:59)
🕵️ Final Module Assignment Solution (23:48)
Figma Styles
Color (Fill) Styles (12:53)
Text Styles (9:39)
Effect Styles and Tips (3:28)
🕵️ Module Assignment Solutions (9:11)
Figma Components and Variants
Component Basics and Strategy (24:26)
Variants and Properties (20:13)
Design System Basics with Figma
Watch This (Link)
Advanced Prototyping in Figma
Detailed Overview of Smart Animate (5:33)
Transitions, Delays, and Clever Prototype Planning (23:32)
Hovers, Overlays, and Prototyping with Components (11:49)
🕵️ Module Assignment Solutions – Part One (Basics) (11:40)
🕵️ Module Assignment Solutions – Part Two (Mastery) (29:26)
🕵️ Final Module Assignments Solutions (12:45)
Introduction to Variables for Efficiency
Introduction to Variables (1:05)
Module Demo & Assignments File (Download)
Variable Foundations (20:13)
Relation to Design System Tokens (9:06)
Are Variables Needed for Efficiency? (9:42)
Light and Dark Mode (38:10)
Multiple Languages (12:14)
Responsive Spatial System (28:32)
Prototyping with Variables (14:51)
Practice: Assignments + Solutions (56:33)
Teamwork and Figma Organization: Tips & Tricks
Important Collaboration and Sharing Tips (12:34)
How to Organize Figma Teams, Projects, and Files (10:34)
File Thumbnails (2:03)
File Organization Best Practices (7:26)
Collaboration and Comments (3:12)
How to Name Screens (2:31)
🕵️ Miscellaneous Assignments Solutions (9:06)
Figma for UI Design (Let’s Design Together)
Introduction (3:53)
Downloads (Working Files)
Follow Along: Responsive Web (Mobile) (47:58)
Follow Along: Responsive Web (Tablet) (16:24)
Follow Along: Responsive Web (Desktop) (19:21)
Follow Along: Mobile App (Hybrid, iOS) (26:46)
Follow Along: Mobile App (Hybrid, Android Adjustments) (5:21)
Follow Along: iPad App (16:51)
Follow Along: Wearable (Apple Watch) App (4:22)
Follow Along: Web App (Dashboard) (26:16)
File Organization Best Practices
Complete and Continue