Intermediate · 6 hr · Paid
Figma — Professional UI/UX Design
["Build a 6-screen mobile app UI from a blank canvas using Auto Layout throughout.","Create a reusable component library with variants and interactive states.","Define and apply a Variables/token system with light & dark color modes.","Build a full clickable prototype with Smart Animate transitions and micro-interactions.","Use Dev Mode to produce a developer-ready handoff with code snippets.","Leverage Figma AI (generate designs, rename layers) to speed up your work."]
What you'll learn
- Build a 6-screen mobile app UI from a blank canvas using Auto Layout throughout.
- Create a reusable component library with variants and interactive states.
- Define and apply a Variables/token system with light & dark color modes.
- Build a full clickable prototype with Smart Animate transitions and micro-interactions.
- Use Dev Mode to produce a developer-ready handoff with code snippets.
- Leverage Figma AI (generate designs, rename layers) to speed up your work.
What this course includes
- Practical, step-by-step lessons
- Automatic progress tracking
- A comprehensive final exam
- Verifiable completion certificate with the Numoo seal
- Lifetime access with ongoing updates
Course content 55 lessons · 12 modules
1Start Here — Course Introduction3 lessons
2Module 1: The Figma Interface & Frames5 lessons
- 🔒1.1 Welcome to Figma — Full Interface Tour7 min
- 🔒1.2 Frames vs. Groups — The Core Difference6 min
- 🔒1.3 Shape Tools & Basic Drawing6 min
- 🔒1.4 Text Tool — Typography Basics6 min
- 🔒1.5 Multi-Screen Navigation — Pages & Frames6 min
3Module 2: Visual Foundation — Color, Typography & Grids4 lessons
- 🔒2.1 Color System — Building a Palette6 min
- 🔒2.2 Type Scale — Building a Typography System6 min
- 🔒2.3 Layout Grids for Mobile Screens6 min
- 🔒2.4 Alignment, Distribution & Measurement6 min
4Module 3: Auto Layout — Responsive by Design5 lessons
- 🔒3.1 Auto Layout Introduction — Flexible Thinking6 min
- 🔒3.2 Nested Auto Layout — Card Components8 min
- 🔒3.3 Hug / Fill / Fixed — Sizing Rules8 min
- 🔒3.4 Auto Layout Alignment & Wrapping6 min
- 🔒3.5 Building the Bottom Navigation Bar8 min
5Module 4: Components & Variants5 lessons
- 🔒4.1 Creating Your First Component — Button8 min
- 🔒4.2 Variants — Multi-State Components8 min
- 🔒4.3 Interactive Components6 min
- 🔒4.4 Component Library — Input, Card & Avatar6 min
- 🔒4.5 The Assets Panel — Search & Apply6 min
6Module 5: Variables & Design Tokens4 lessons
- 🔒5.1 Variables Introduction — Beyond Styles9 min
- 🔒5.2 Semantic Tokens — The Meaning Layer9 min
- 🔒5.3 Modes — Light & Dark Mode9 min
- 🔒5.4 String Variables — Dynamic Text8 min
7Module 6: Constraints & Responsive Design2 lessons
- 🔒6.1 Constraints — How Elements Move on Resize6 min
- 🔒6.2 Multi-Size Design — Mobile & Tablet6 min
8Module 7: Prototyping & Interactions5 lessons
- 🔒7.1 Prototyping Basics — Links & Flows6 min
- 🔒7.2 Smart Animate — Smooth Transitions8 min
- 🔒7.3 Advanced Transitions — Overlays & Scroll6 min
- 🔒7.4 In-Component Interactions for Realism8 min
- 🔒7.5 Sharing the Prototype & Collecting Feedback6 min
9Module 8: Dev Mode & Developer Handoff3 lessons
- 🔒8.1 File Organization — Naming & Conventions6 min
- 🔒8.2 Dev Mode — Design Handoff6 min
- 🔒8.3 Annotations & Specs — Documenting Decisions6 min
10Module 9: AI, Plugins & Collaboration4 lessons
- 🔒9.1 Figma AI — Make Designs6 min
- 🔒9.2 AI Rename & Auto-Organization6 min
- 🔒9.3 Essential Plugins Workflow6 min
- 🔒9.4 Collaboration — Branching & Review6 min
11Module 10: Capstone — The Complete Rawi App10 lessons
- 🔒10.1 Design Audit — Checking the Full Project6 min
- 🔒10.2 Preparing the Final Handoff File6 min
- 🔒Building the Home Screen — Step by Step9 min
- 🔒Building the Onboarding Screen — Step by Step6 min
- 🔒Building the Discover Screen — Step by Step6 min
- 🔒Building the Player Screen — Step by Step8 min
- 🔒Building the Profile Screen — Step by Step6 min
- 🔒Building the Settings Screen — Step by Step6 min
- 🔒Project Showcase — The Complete Rawi App6 min
- 🔒10.3 Presenting Your Design — Presentation Mode6 min
12Interactive Exercises — Mastery Games5 lessons
- 🔒🎮 Game: Layer Detective (Module 1)10 min
- 🔒🎮 Game: Constraints Simulator (Module 6)10 min
- 🔒🎮 Game: Token Cascade (Module 5)10 min
- 🔒🎮 Game: Component Swap Race (Module 4)10 min
- 🔒🎮 Game: Prototype Flow Builder (Module 7)10 min
★Final Exam12 questions · pass 70%
Course Q&A
0 questions · 0 answers💬 Live in-course support: ask anything anytime — the instructor and peers answer.
Sign in and enroll to join the discussionStudent reviews
No reviews yet — be the first after you complete the course.