Loading...
Design Roadmap
Product Designer Roadmap
Product design is more than UI. It's research, information architecture, interaction design, visual design, and increasingly AI-augmented prototyping. This roadmap is the modern, ship-focused path.
7 stages 5-9 months All levels Designers focused on shipping software products
By the end you’ll be able to
- 1Run lightweight user research that informs decisions
- 2Design accessible, on-brand interfaces in Figma
- 3Build interactive prototypes for usability tests
- 4Ship a real product alongside engineering
- 5Use AI tools (Galileo, v0, Krea) without losing taste
01
Stage 1 3-5 weeks
Design Foundations
Type, color, layout, hierarchy
Before any tool, learn the principles. Type pairing, color theory, grid systems, visual hierarchy, contrast. These transfer to every tool you'll ever use.
Skills to develop
Type pairing & vertical rhythmColor systems (HSL, accessibility)Grid & spacingHierarchy & emphasisComposition
Resources
- BookRefactoring UI by Adam Wathan & Steve Schoger
- BookPractical Typography by Matthew ButterickFREE
02
Stage 2 4-6 weeks
Figma
Components, variants, auto layout, libraries
Figma is the design industry's source of truth. Learn auto layout, components, variants, design tokens, and shared libraries. Plugins and Dev Mode are also non-optional.
Skills to develop
Auto layout deeplyComponents & variantsDesign tokens & librariesDev Mode for handoffUseful plugins
Recommended tools
Resources
03
Stage 3 2-3 weeks
Research & Discovery
Talking to users without leading them
The hardest skill: hearing what users actually mean. Learn to run lightweight interviews, usability tests, and synthesize themes. Tools like Maze and Dovetail help, but the skill is in the questions you ask.
Skills to develop
1:1 interviews & 5-question ruleUsability testingSynthesis & themesJTBD framing
Resources
- BookContinuous Discovery Habits by Teresa Torres
04
Stage 4 3-4 weeks
UX Patterns & IA
Don't reinvent solved problems
Most UX problems are solved. Learn the patterns: navigation, search, forms, onboarding, empty states, error states. Then break them deliberately when you have a reason.
Skills to develop
Navigation patternsForms (real ones, not portfolio ones)Onboarding flowsEmpty / error / loading statesInformation architecture
Resources
05
Stage 5 2-3 weeks
Prototyping & Motion
Figma prototypes, ProtoPie, Origami
Static screens lie. Real prototypes reveal interaction problems before code. Master Figma's prototyping; reach for ProtoPie or Origami when you need real logic.
Skills to develop
Figma interactive componentsSmart AnimateProtoPie / Origami for advanced casesDesign tokens for motion
06
Stage 6 1-2 weeks
AI-Augmented Design
Galileo, v0, Krea, Magnific
AI changes the design loop. Use Galileo or Uizard for first-cut layouts, v0 to prototype with real React, Krea for fast asset generation, Magnific for upscaling. Then refine with taste.
Skills to develop
Galileo AI / Uizard for scaffoldsv0 for live React prototypesKrea / Magnific for visualsRecraft for vector assets
Recommended tools
07
Stage 7 2-3 weeks
Working with Engineering
Handoff, design systems, code awareness
Designers who understand React and Tailwind ship better products. You don't need to write production code, but you should be able to read it and tweak a component.
Skills to develop
Design system thinkingTailwind & shadcn/ui basicsReading PRs & GitHub flowsStorybook
Ready to build with what you've learned?
We pair these roadmaps with hands-on engagements pair-programming, code review, and architecture support.