Course
Product Design
A 12-week project-based course taking you from idea to interactive prototype, with Figma as the core tool. Learn design thinking and UX research, master Figma craft — auto layout, components, variants, and variables — then design one real product end-to-end: flows, wireframes, a two-theme design system, polished high-fidelity screens, a clickable prototype, usability testing, and developer handoff. You graduate with a complete case study and a reusable Figma toolkit, not scattered exercises. Expect 10–15 hours per week of lessons, labs, and a weekly design deliverable.
Module 1 — Week 1 — What Product Design Is + Design Thinking
- ✓What product design actually is20mFree preview
- ✓Design thinking & problem framing25mFree preview
- ✓Setting up Figma & meeting FigJam20mFree preview
- ✓Lab: a mini design sprint in FigJam60mPracticalFree preview
- ✓Lab: HMW rewrites & an app you love60mPracticalFree preview
- ✓Weekly deliverable: problem framing board120mProjectFree preview
Module 2 — Week 2 — Understanding Users: UX Research Basics
- ✓Research methods & competitive analysis25m🔒
- ✓User interviews: asking without leading25m🔒
- ✓Synthesis: affinity maps, personas & journey maps25m🔒
- ✓Lab: interview two real people120mPractical🔒
- ✓Lab: persona, journey map & competitive teardown120mPractical🔒
- ✓Weekly deliverable: research synthesis board150mProject🔒
Module 3 — Week 3 — Figma Fundamentals
- ✓The Figma interface, frames & the daily reps habit20m🔒
- ✓Shapes, the pen tool, booleans & masks25m🔒
- ✓Typography, color, alignment & file hygiene25m🔒
- ✓Lab: the UI element gym120mPractical🔒
- ✓Lab: pen-tool icons & a full screen recreation120mPractical🔒
- ✓Weekly deliverable: the complete UI element gym90mProject🔒
Module 4 — Week 4 — Auto Layout & Responsive Thinking
- ✓Auto layout: the most important Figma skill25m🔒
- ✓Hug, fixed, fill: the resizing mental model25m🔒
- ✓Nesting, wrapping & responsive screens25m🔒
- ✓Lab: rebuild the gym with auto layout120mPractical🔒
- ✓Lab: the unbreakable pricing card & a 3-breakpoint screen120mPractical🔒
- ✓Weekly deliverable: a responsive landing page150mProject🔒
Module 5 — Week 5 — Components, Variants & Styles
- ✓Components & instances: build once, reuse everywhere25m🔒
- ✓Variants & component properties25m🔒
- ✓Styles, variables & two-theme setup30m🔒
- ✓Lab: the button system120mPractical🔒
- ✓Lab: variables & one-click dark mode120mPractical🔒
- ✓Weekly deliverable: starter design system + project kickoff180mProject🔒
Module 6 — Week 6 — Information Architecture, User Flows & Wireframing
- ✓Information architecture: structuring the product25m🔒
- ✓User flows: mapping every step and decision25m🔒
- ✓Wireframing: speed over beauty (and the pattern shelf)25m🔒
- ✓Lab: sitemap & core flow for your product120mPractical🔒
- ✓Lab: Crazy 8s & first wireframes120mPractical🔒
- ✓Weekly deliverable: the complete wireflow180mProject🔒
Module 7 — Week 7 — Visual Design & UI Fundamentals
- ✓Typography for interfaces25m🔒
- ✓Color, contrast & accessible palettes25m🔒
- ✓Visual hierarchy, mood boards & finding a direction25m🔒
- ✓Lab: mood board & two style tiles120mPractical🔒
- ✓Lab: first hi-fi screens & the contrast pass120mPractical🔒
- ✓Weekly deliverable: visual direction locked150mProject🔒
Module 8 — Week 8 — High-Fidelity Design at Scale
- ✓Production mode: system discipline at scale25m🔒
- ✓Designing the unhappy paths: states & edge cases25m🔒
- ✓Responsive versions, annotations & the peer audit20m🔒
- ✓Lab: the hi-fi production sprint240mPractical🔒
- ✓Lab: edge-case pass & the peer audit180mPractical🔒
- ✓Weekly deliverable: the complete hi-fi screen set180mProject🔒
Module 9 — Week 9 — Prototyping & Interaction Design
- ✓Prototyping fundamentals: connections, triggers, flows25m🔒
- ✓Smart animate, overlays & motion principles25m🔒
- ✓Interactive components & prototype logic with variables25m🔒
- ✓Lab: wire the complete core flow150mPractical🔒
- ✓Lab: one polished micro-interaction + working logic120mPractical🔒
- ✓Weekly deliverable: the clickable prototype150mProject🔒
Module 10 — Week 10 — Usability Testing & Iteration
- ✓Why test, and how to write a test plan25m🔒
- ✓Facilitating: think-aloud without leading25m🔒
- ✓Findings, severity & designing the iteration25m🔒
- ✓Lab: write the plan, run three sessions240mPractical🔒
- ✓Lab: synthesize, prioritize, and fix180mPractical🔒
- ✓Weekly deliverable: test report + iterated v2150mProject🔒
Module 11 — Week 11 — Design Systems Maturity & Developer Handoff
- ✓Documentation & publishing your library25m🔒
- ✓Dev Mode & thinking like your developer25m🔒
- ✓Collaboration, critique culture & AI in the workflow25m🔒
- ✓Lab: document five components & publish the library150mPractical🔒
- ✓Lab: the handoff simulation120mPractical🔒
- ✓Weekly deliverable: the handoff-ready file150mProject🔒
Module 12 — Week 12 — Capstone: Case Study & Portfolio
- ✓The case study: telling the story of your thinking25m🔒
- ✓Presenting your work & surviving the design interview25m🔒
- ✓Capstone: the case study & presentation480mProject🔒
- ✓Capstone: your Figma toolkit & what comes next180mProject🔒
Already enrolled? Sign in with your enrollment email to unlock all lessons.