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 1Week 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 2Week 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 3Week 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 4Week 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 5Week 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 6Week 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 7Week 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 8Week 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 9Week 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 10Week 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 11Week 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 12Week 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.