UI/UX Design Roadmap

Before opening Figma, understand the principles that make design work.

• The 8 principles of good design — contrast, alignment, hierarchy, proximity, repetition, balance, white space, colour
• Typography — typefaces, scale, weight, line height, pairing
• Colour theory — hue, saturation, value, harmony, accessibility (WCAG AA)
• Visual hierarchy — guiding the eye
• Grid systems and layout
• Gestalt principles — how people group visual information

Figma is the industry standard design tool. Learn the core workflow.

• Frames, layers, groups, and pages
• Auto layout — the key to responsive designs
• Components — creating, nesting, and overriding
• Styles — colour, text, and effect tokens
• Constraints and responsive resizing
• Figma Dev Mode — handing off to developers

Build a consistent design system with reusable components.

• Buttons — states: default, hover, active, disabled
• Forms — inputs, selects, checkboxes, validation states
• Navigation — headers, sidebars, mobile menus
• Cards, modals, and overlay patterns
• Data tables and list views
• Empty states, loading skeletons, and error states

Good UI without UX thinking wastes beautiful pixels. Learn to design for actual humans.

• User interviews — asking questions that reveal truth
• Personas and user journey maps
• Information architecture — card sorting and tree testing
• Usability testing — watching users use your design
• Accessibility (a11y) — designing for everyone
• Cognitive load and decision fatigue

Click-through prototypes let you test ideas before writing a line of code.

• Figma prototyping — connections, transitions, overlays
• Interactive components with variants
• User testing your prototype with real people
• Iterating on feedback quickly
• Presenting designs to stakeholders

Land your first design job or freelance client with a strong portfolio.

• What makes a great design case study
• Documenting your design process
• Building a portfolio on Behance, Framer, or your own site
• Applying to design roles — what to include in your CV
• Freelance design — finding clients and pricing
• Design communities — Dribbble, Layers, Design Systems Slack