Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Advanced Figma Video Course + Let's Design Together Add-on
Introduction Videos and Course Files
👋 Thank You and Welcome! (1:52)
👋 Who is This Course for? (1:37)
👋 Playback, Captions, and Video Speed (0:26)
🚀 Prerequisites (1:17)
🚀 How to Get the Most Out of the Course? (1:05)
🚀 Assignments Overview and Tips (Don't Skip) (5:18)
📁 Course Demo File and Assignments File
📁 UI Basics Kit for Any Type of Project
📁 100+ Must-know Figma Shortcuts
📁 100+ Must-have Figma Plugins
📹 Using Plugins in Figma (Artboard Studio Demo) (5:11)
🤑 Exclusive Student Discounts and Perks
🕵️ Module Assignments Solutions (9:14)
🕵️ Test Your Knowledge Assignments Solutions (16:48)
📹 2023 Figma Features Update (7:46)
⚠️ 2024: UI3 Update (Don't Skip)
Advanced Layers and Shapes
👋 Introduction to Advanced Layers and Shapes (0:30)
📹 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
👋 Introduction to Iconography in Figma (0:36)
📹 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
👋 Introduction to Using Photos and Illustrations in Figma (0:30)
📹 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 and Layouts
👋 Introduction to Grids and Layers (0:43)
📹 Grid Basics (8:01)
📹 Controling 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
👋 Introduction to Practical Auto-layout (0:47)
📹 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
👋 Introduction to Figma Styles (1:11)
📹 Color (Fill) Styles (12:53)
📹 Text Style (9:39)
📹 Effect Styles and Tips (3:28)
🕵️ Module Assignment Solutions (9:11)
Components and Variants
👋 Introduction to Components and Variants (0:37)
📹 Component Basics and Strategy (24:26)
📹 Variants and Properties (20:13)
⭐️ Course Feedback
Design System Basics with Figma
👋 Introduction to Design System Basics with Figma (4:18)
📹 Scalable Color Palettes (22:57)
📑 Colors Assignment
🕵️ Assignment Speed Through (3:35)
📹 Scalable Typography (16:13)
📑 Typography Assignment
🕵️ Assignment Speed Through (0:57)
📹 Scalable Spacing System (7:11)
📹 Elevation as a Foundational Element (8:23)
📹 Iconography (4:45)
📹 Creating Buttons (17:14)
📑 Buttons Assignment
🕵️ Buttons Assignment Solution Walkthrough (1:44)
📹 Input Fields and Dropdown Fields (11:41)
📑 Input Fields Assignment
🕵️ Input Fields Assignment Solution Walkthrough (4:35)
📹 Selection Controls (18:04)
📑 Selection Controls Assignment
🕵️ Selection Controls Solution Speed Through (2:41)
📹 Design System Example Walkthrough (12:15)
📹 Using a Design System (8:00)
📹 Final Tips and Tricks (5:36)
Advanced Prototyping in Figma
👋 Introduction to Advanced Prototyping in Figma (0:37)
📹 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)
Leveraging Variables for Efficiency
👋 Introduction to Variables (1:05)
📁 Module Demo & Assignments File
📹 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)
🕵️ Module Assignments Solutions (56:33)
Teamwork and Figma Organization: Tips and Tricks
👋 Introduction to Teamwork and Figma Organization: Tips and Tricks (0:33)
📹 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)
Let's Design Together Add-on
👋 Introduction to "Let's Design Together" Add-on (3:53)
📁 Downloads (.fig)
📹 01 - A - Responsive Web (Mobile) (47:58)
📹 01 - B - Responsive Web (Tablet) (16:24)
📹 01 - C - Responsive Web (Desktop) (19:21)
📹 02 - A - Mobile App (Hybrid, iOS) (26:46)
📹 02 - B - Mobile App (Hybrid, Android Adjustments) (5:21)
📹 03 - iPad App (16:51)
📹 04 - Wearable (Apple Watch) App (4:22)
📹 05 - Web App (Dashboard) (26:16)
Conclusion
⭐️ Make an Impact, Leave a Review!
🚀 What's Next?
📹 File Organization Best Practices
Complete and Continue