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

  1. ✓What product design actually is
    20mFree preview
  2. ✓Design thinking & problem framing
    25mFree preview
  3. ✓Setting up Figma & meeting FigJam
    20mFree preview
  4. ✓Lab: a mini design sprint in FigJam
    60mPracticalFree preview
  5. ✓Lab: HMW rewrites & an app you love
    60mPracticalFree preview
  6. ✓Weekly deliverable: problem framing board
    120mProjectFree preview

Module 2 — Week 2 — Understanding Users: UX Research Basics

  1. ✓Research methods & competitive analysis
    25m🔒
  2. ✓User interviews: asking without leading
    25m🔒
  3. ✓Synthesis: affinity maps, personas & journey maps
    25m🔒
  4. ✓Lab: interview two real people
    120mPractical🔒
  5. ✓Lab: persona, journey map & competitive teardown
    120mPractical🔒
  6. ✓Weekly deliverable: research synthesis board
    150mProject🔒

Module 3 — Week 3 — Figma Fundamentals

  1. ✓The Figma interface, frames & the daily reps habit
    20m🔒
  2. ✓Shapes, the pen tool, booleans & masks
    25m🔒
  3. ✓Typography, color, alignment & file hygiene
    25m🔒
  4. ✓Lab: the UI element gym
    120mPractical🔒
  5. ✓Lab: pen-tool icons & a full screen recreation
    120mPractical🔒
  6. ✓Weekly deliverable: the complete UI element gym
    90mProject🔒

Module 4 — Week 4 — Auto Layout & Responsive Thinking

  1. ✓Auto layout: the most important Figma skill
    25m🔒
  2. ✓Hug, fixed, fill: the resizing mental model
    25m🔒
  3. ✓Nesting, wrapping & responsive screens
    25m🔒
  4. ✓Lab: rebuild the gym with auto layout
    120mPractical🔒
  5. ✓Lab: the unbreakable pricing card & a 3-breakpoint screen
    120mPractical🔒
  6. ✓Weekly deliverable: a responsive landing page
    150mProject🔒

Module 5 — Week 5 — Components, Variants & Styles

  1. ✓Components & instances: build once, reuse everywhere
    25m🔒
  2. ✓Variants & component properties
    25m🔒
  3. ✓Styles, variables & two-theme setup
    30m🔒
  4. ✓Lab: the button system
    120mPractical🔒
  5. ✓Lab: variables & one-click dark mode
    120mPractical🔒
  6. ✓Weekly deliverable: starter design system + project kickoff
    180mProject🔒

Module 6 — Week 6 — Information Architecture, User Flows & Wireframing

  1. ✓Information architecture: structuring the product
    25m🔒
  2. ✓User flows: mapping every step and decision
    25m🔒
  3. ✓Wireframing: speed over beauty (and the pattern shelf)
    25m🔒
  4. ✓Lab: sitemap & core flow for your product
    120mPractical🔒
  5. ✓Lab: Crazy 8s & first wireframes
    120mPractical🔒
  6. ✓Weekly deliverable: the complete wireflow
    180mProject🔒

Module 7 — Week 7 — Visual Design & UI Fundamentals

  1. ✓Typography for interfaces
    25m🔒
  2. ✓Color, contrast & accessible palettes
    25m🔒
  3. ✓Visual hierarchy, mood boards & finding a direction
    25m🔒
  4. ✓Lab: mood board & two style tiles
    120mPractical🔒
  5. ✓Lab: first hi-fi screens & the contrast pass
    120mPractical🔒
  6. ✓Weekly deliverable: visual direction locked
    150mProject🔒

Module 8 — Week 8 — High-Fidelity Design at Scale

  1. ✓Production mode: system discipline at scale
    25m🔒
  2. ✓Designing the unhappy paths: states & edge cases
    25m🔒
  3. ✓Responsive versions, annotations & the peer audit
    20m🔒
  4. ✓Lab: the hi-fi production sprint
    240mPractical🔒
  5. ✓Lab: edge-case pass & the peer audit
    180mPractical🔒
  6. ✓Weekly deliverable: the complete hi-fi screen set
    180mProject🔒

Module 9 — Week 9 — Prototyping & Interaction Design

  1. ✓Prototyping fundamentals: connections, triggers, flows
    25m🔒
  2. ✓Smart animate, overlays & motion principles
    25m🔒
  3. ✓Interactive components & prototype logic with variables
    25m🔒
  4. ✓Lab: wire the complete core flow
    150mPractical🔒
  5. ✓Lab: one polished micro-interaction + working logic
    120mPractical🔒
  6. ✓Weekly deliverable: the clickable prototype
    150mProject🔒

Module 10 — Week 10 — Usability Testing & Iteration

  1. ✓Why test, and how to write a test plan
    25m🔒
  2. ✓Facilitating: think-aloud without leading
    25m🔒
  3. ✓Findings, severity & designing the iteration
    25m🔒
  4. ✓Lab: write the plan, run three sessions
    240mPractical🔒
  5. ✓Lab: synthesize, prioritize, and fix
    180mPractical🔒
  6. ✓Weekly deliverable: test report + iterated v2
    150mProject🔒

Module 11 — Week 11 — Design Systems Maturity & Developer Handoff

  1. ✓Documentation & publishing your library
    25m🔒
  2. ✓Dev Mode & thinking like your developer
    25m🔒
  3. ✓Collaboration, critique culture & AI in the workflow
    25m🔒
  4. ✓Lab: document five components & publish the library
    150mPractical🔒
  5. ✓Lab: the handoff simulation
    120mPractical🔒
  6. ✓Weekly deliverable: the handoff-ready file
    150mProject🔒

Module 12 — Week 12 — Capstone: Case Study & Portfolio

  1. ✓The case study: telling the story of your thinking
    25m🔒
  2. ✓Presenting your work & surviving the design interview
    25m🔒
  3. ✓Capstone: the case study & presentation
    480mProject🔒
  4. ✓Capstone: your Figma toolkit & what comes next
    180mProject🔒

Already enrolled? Sign in with your enrollment email to unlock all lessons.