Example Curriculum
Introduction Videos and Course Files
Available in
days
days
after you enroll
- 👋 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
Available in
days
days
after you enroll
- 👋 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
Available in
days
days
after you enroll
- 👋 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
Available in
days
days
after you enroll
- 👋 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
Available in
days
days
after you enroll
Practical Auto-layout
Available in
days
days
after you enroll
- 👋 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
Available in
days
days
after you enroll
Components and Variants
Available in
days
days
after you enroll
Design System Basics with Figma
Available in
days
days
after you enroll
- 👋 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
Available in
days
days
after you enroll
- 👋 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
Available in
days
days
after you enroll
- 👋 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
Available in
days
days
after you enroll
- 👋 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
Available in
days
days
after you enroll
- 👋 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
Available in
days
days
after you enroll