# Learn UI UX (learnuiux.org)

> Learn UI UX design for free, by designing rather than watching videos. A UI UX design roadmap (6 parts, 29 units), a free hands-on course (the 6 Foundations units), 25 free Figma lessons in a browser editor, and 6 free UX games. Lessons, the editor and games are hosted by UX UI Open (uxuiopen.com).

Key idea: watching YouTube videos alone won't make you a designer. Design is a practical skill; every lesson here has you design something in a real editor, with steps that check themselves.

## Pages

- Home: https://learnuiux.org/
- UI UX design roadmap 2026: https://learnuiux.org/roadmap
- Free UI UX design course (Foundations): https://learnuiux.org/free-course
- Learn Figma free (25 lessons): https://learnuiux.org/learn-figma-free
- How to learn UI UX design for free: https://learnuiux.org/how-to-learn-ui-ux-design
- Free UX games: https://learnuiux.org/games
- Bootcamp with mentors (UX UI Open): https://www.uxuiopen.com/

## Part 1: Foundations (Units 1–6, free)

### Unit 1: Your AI design studio

Set up your tools, learn how AI works, write briefs and start your design journal.
Start free: https://www.uxuiopen.com/free-course/your-ai-design-studio

- 1.1 Make something in two minutes: https://www.uxuiopen.com/free-course/your-ai-design-studio/first-design
- 1.2 Set up your studio: https://www.uxuiopen.com/free-course/your-ai-design-studio/setup
- 1.3 How AI makes things: https://www.uxuiopen.com/free-course/your-ai-design-studio/how-ai-works
- 1.4 Brief AI like an art director: https://www.uxuiopen.com/free-course/your-ai-design-studio/prompting
- 1.5 Build your design assistant: https://www.uxuiopen.com/free-course/your-ai-design-studio/assistant
- 1.6 Keep a design journal: https://www.uxuiopen.com/free-course/your-ai-design-studio/journal
- 1.7 Use AI responsibly: https://www.uxuiopen.com/free-course/your-ai-design-studio/responsible-ai
- 1.8 Project: Same brief, three tools: https://www.uxuiopen.com/free-course/your-ai-design-studio/project

### Unit 2: Seeing like a designer

Perception, Gestalt, critique and taste. Mood boards, and judging AI output.
Start free: https://www.uxuiopen.com/free-course/seeing-like-a-designer

- 2.1 How people see: https://www.uxuiopen.com/free-course/seeing-like-a-designer/how-people-see
- 2.2 How we group what we see: https://www.uxuiopen.com/free-course/seeing-like-a-designer/gestalt
- 2.3 Weight, balance and contrast: https://www.uxuiopen.com/free-course/seeing-like-a-designer/weight-and-contrast
- 2.4 Critique like a designer: https://www.uxuiopen.com/free-course/seeing-like-a-designer/critique
- 2.5 Build your taste: https://www.uxuiopen.com/free-course/seeing-like-a-designer/taste
- 2.6 Judge AI output like a pro: https://www.uxuiopen.com/free-course/seeing-like-a-designer/judging-ai
- 2.7 Project: Redesign with reasons: https://www.uxuiopen.com/free-course/seeing-like-a-designer/project

### Unit 3: Typography

Anatomy, pairing, scale and readability on screen.
Start free: https://www.uxuiopen.com/free-course/typography

- 3.1 The parts of a letter: https://www.uxuiopen.com/free-course/typography/anatomy
- 3.2 Choosing a typeface: https://www.uxuiopen.com/free-course/typography/choosing
- 3.3 Size, scale and hierarchy: https://www.uxuiopen.com/free-course/typography/scale
- 3.4 Spacing: line length, leading and letter spacing: https://www.uxuiopen.com/free-course/typography/spacing
- 3.5 Pairing typefaces: https://www.uxuiopen.com/free-course/typography/pairing
- 3.6 Type on screens, for everyone: https://www.uxuiopen.com/free-course/typography/screens
- 3.7 Judge AI typography: https://www.uxuiopen.com/free-course/typography/judging-ai
- 3.8 Project: Typeset a page with a type system: https://www.uxuiopen.com/free-course/typography/project

### Unit 4: Color

Colour theory, palettes, meaning and contrast, and building a colour system.
Start free: https://www.uxuiopen.com/free-course/color

- 4.1 How color works: https://www.uxuiopen.com/free-course/color/how-color-works
- 4.2 Color harmony: https://www.uxuiopen.com/free-course/color/harmony
- 4.3 Color, mood and meaning: https://www.uxuiopen.com/free-course/color/meaning
- 4.4 Contrast and accessible color: https://www.uxuiopen.com/free-course/color/contrast
- 4.5 Building a UI palette: https://www.uxuiopen.com/free-course/color/palettes
- 4.6 Color systems and dark mode: https://www.uxuiopen.com/free-course/color/systems
- 4.7 Judge AI color: https://www.uxuiopen.com/free-course/color/judging-ai
- 4.8 Project: A color system for a brand: https://www.uxuiopen.com/free-course/color/project

### Unit 5: Layout, space and hierarchy

Grids, spacing, alignment and composition across screen sizes.
Start free: https://www.uxuiopen.com/free-course/layout

- 5.1 Grids: https://www.uxuiopen.com/free-course/layout/grids
- 5.2 Spacing systems: https://www.uxuiopen.com/free-course/layout/spacing
- 5.3 Alignment: https://www.uxuiopen.com/free-course/layout/alignment
- 5.4 Hierarchy through layout: https://www.uxuiopen.com/free-course/layout/hierarchy
- 5.5 Responsive layout: https://www.uxuiopen.com/free-course/layout/responsive
- 5.6 Composition and cropping: https://www.uxuiopen.com/free-course/layout/composition
- 5.7 Judge AI layouts: https://www.uxuiopen.com/free-course/layout/judging-ai
- 5.8 Project: A responsive page, properly built: https://www.uxuiopen.com/free-course/layout/project

### Unit 6: Design thinking and AI problem framing

Human-centred design, the Double Diamond, and framing problems before asking AI for answers.
Start free: https://www.uxuiopen.com/free-course/design-thinking

- 6.1 What design thinking is: https://www.uxuiopen.com/free-course/design-thinking/what-is
- 6.2 Understand people: https://www.uxuiopen.com/free-course/design-thinking/research
- 6.3 Make sense of research: https://www.uxuiopen.com/free-course/design-thinking/synthesis
- 6.4 Frame the right problem: https://www.uxuiopen.com/free-course/design-thinking/framing
- 6.5 Generate and choose ideas: https://www.uxuiopen.com/free-course/design-thinking/ideate
- 6.6 Prototype and test: https://www.uxuiopen.com/free-course/design-thinking/test
- 6.7 A one-day mini sprint: https://www.uxuiopen.com/free-course/design-thinking/sprint
- 6.8 Project: From problem to tested prototype: https://www.uxuiopen.com/free-course/design-thinking/project

## Part 2: Graphic and brand (Units 7–10, bootcamp)

### Unit 7: Graphic design and composition

Composition, grids and visual rhythm in posters, covers and social graphics.

- 7.1 What a graphic has to do
- 7.2 Focal point and visual weight
- 7.3 Grids for posters and social graphics
- 7.4 Contrast, scale and rhythm
- 7.5 Type and image together
- 7.6 One idea, many formats
- 7.7 Judging AI-made graphics
- Project: An event campaign: poster and social set

### Unit 8: Brand identity

Logos, colour, type, imagery and voice, built into one identity system.

- 8.1 What a brand is (and isn't)
- 8.2 Strategy first: purpose, audience, personality
- 8.3 Logos: types, sketching and testing
- 8.4 Brand colour and type
- 8.5 Imagery, icons and voice
- 8.6 From pieces to a system: guidelines
- 8.7 AI in branding: explore, judge, own
- Project: A brand identity for a small business

### Unit 9: Packaging and physical products

Labels, boxes and unboxing for real products on real shelves.

- 9.1 What packaging has to do
- 9.2 Structures and dielines
- 9.3 The front of the pack
- 9.4 Back of pack: information that must be right
- 9.5 Labels on round things
- 9.6 Print, colour and finishes
- 9.7 Unboxing and the box's second life
- 9.8 AI mockups and real prototypes
- Project: Packaging for a real product

### Unit 10: Motion graphics

Animating type, logos and graphics for brands and social.

- 10.1 What motion is for
- 10.2 Timing and easing
- 10.3 Principles that make motion feel alive
- 10.4 Keyframes, timelines and sequencing
- 10.5 Moving type
- 10.6 Logos that build themselves
- 10.7 Loops for social and product
- 10.8 Motion for everyone, and AI motion tools
- Project: A motion kit for a brand

## Part 3: UX: understanding people (Units 11–14, bootcamp)

### Unit 11: Research planning and methods

Planning research, choosing methods and running interviews that get honest answers.

- 11.1 Why research, and which kind
- 11.2 Write a research plan
- 11.3 Find the right people
- 11.4 Run a great interview
- 11.5 Watch, don't just ask
- 11.6 Usability testing
- 11.7 Surveys and analytics
- 11.8 Research with AI, ethically
- Project: A research study, start to finish

### Unit 12: Synthesis and defining the problem

Turning notes into patterns, personas and journey maps, and one clear problem.

- 12.1 From data to insight
- 12.2 Coding and tagging your data
- 12.3 Affinity mapping and themes
- 12.4 Personas and jobs to be done
- 12.5 Journey maps and service blueprints
- 12.6 Framing the problem
- 12.7 Prioritising opportunities
- 12.8 Sharing findings, with AI and without bias
- Project: A synthesis package

### Unit 13: Information architecture and flows

Site maps, navigation, user flows and wireflows.

- 13.1 What information architecture is
- 13.2 Organising content
- 13.3 Card sorting
- 13.4 Labels that work
- 13.5 Navigation patterns
- 13.6 Sitemaps and tree testing
- 13.7 User flows
- 13.8 States, search and AI
- Project: An IA and flows package

### Unit 14: Ideation and AI product strategy

Generating and choosing ideas, and deciding what an AI product should do.

- 14.1 Diverge, then converge
- 14.2 Techniques for better ideas
- 14.3 AI as an ideation partner
- 14.4 Evaluate ideas and test assumptions
- 14.5 When AI fits, and when it doesn't
- 14.6 Design AI experiences people trust
- 14.7 Prioritise and plan the smallest test
- 14.8 Measure success and build responsibly
- Project: An AI product strategy brief

## Part 4: UI and AI workflow (Units 15–20, bootcamp)

### Unit 15: Figma fluency

Frames, auto layout, components, variants and a tidy file.

- 15.1 The canvas, frames and layers
- 15.2 Auto layout
- 15.3 Hug, fill, fixed and constraints
- 15.4 Components and instances
- 15.5 Variants and component properties
- 15.6 Styles and variables
- 15.7 Prototyping in Figma
- 15.8 Collaboration and handoff
- Project: A component-built, prototyped flow

### Unit 16: UI craft

Buttons, forms, cards and screens, with every state designed.

- 16.1 Spacing and rhythm
- 16.2 Typography for interfaces
- 16.3 Colour in interfaces
- 16.4 Buttons and controls
- 16.5 Forms that work
- 16.6 Cards, lists and tables
- 16.7 Icons, images and depth
- 16.8 Polish and critique
- Project: A polished screen set

### Unit 17: Design systems and AI tokens

Tokens, libraries and documentation, and how AI tools use your system.

- 17.1 What a design system is
- 17.2 Design tokens in tiers
- 17.3 Naming, modes and theming
- 17.4 Component architecture
- 17.5 Documentation and usage guidelines
- 17.6 Governance, contribution and versioning
- 17.7 Tokens to code
- 17.8 AI and design systems
- Project: A two-brand design system starter

### Unit 18: Accessibility and inclusive design

Contrast, focus, screen readers and inclusive design, checked against WCAG.

- 18.1 Why accessibility, and how WCAG works
- 18.2 Colour and contrast, properly
- 18.3 Text size, zoom and reflow
- 18.4 Keyboard, focus and skip links
- 18.5 Screen readers, semantics and annotations
- 18.6 Forms, errors and cognitive accessibility
- 18.7 Touch targets, gestures and motion
- 18.8 Testing, audits and AI checkers
- Project: An accessible reservation flow

### Unit 19: Prototyping and motion with AI

Clickable prototypes, transitions and micro-interactions, with AI to speed things up.

- 19.1 Fidelity: how real should it be?
- 19.2 Components that react
- 19.3 Logic and state in prototypes
- 19.4 Motion that explains
- 19.5 Smart animate, properly
- 19.6 AI prototyping tools
- 19.7 Testing prototypes
- 19.8 From prototype to product
- Project: A tested, specified prototype with AI

### Unit 20: AI agents in the canvas

Working with AI agents inside your design tools, and staying in charge.

- 20.1 What AI agents are
- 20.2 Context is everything
- 20.3 MCP: how agents reach your tools
- 20.4 Briefing agents for design work
- 20.5 Reviewing agent edits
- 20.6 Agents and design systems
- 20.7 Automating the boring parts
- 20.8 The designer's role and ethics
- Project: An agent-ready file and a reviewed agent run

## Part 5: AI apps and new devices (Units 21–25, bootcamp)

### Unit 21: Designing AI products

Expectations, errors, uncertainty and control in AI features.

- 21.1 What makes AI products different
- 21.2 How LLMs work, for designers
- 21.3 System prompts and behaviour
- 21.4 AI interaction patterns
- 21.5 Structured output and tools
- 21.6 Grounding and retrieval
- 21.7 Quality, cost, latency and safety
- 21.8 Strategy, metrics and the AI feature spec
- Project: Design an AI feature, end to end

### Unit 22: Wearables and XR

Glanceable screens for watches, and interfaces for glasses and headsets.

- 22.1 Designing for the body
- 22.2 Smart glasses UX
- 22.3 Building for Meta glasses
- 22.4 VR fundamentals
- 22.5 Spatial UI design
- 22.6 WebXR and VR APIs
- 22.7 AI in XR
- 22.8 Prototyping and testing XR
- Project: A hands-free assistant and a VR class

### Unit 23: Voice, AI devices and robots

Voice, light and touch for AI pins, speakers and robots that talk back.

- 23.1 Designing for voice
- 23.2 Conversation design
- 23.3 Building with ElevenLabs
- 23.4 How voice agents work
- 23.5 Dictation-first design
- 23.6 AI music and sound with Suno
- 23.7 AI devices and robots
- 23.8 Testing voice experiences
- Project: A voice experience for Crumb Club

### Unit 24: Usability testing and evaluation

Planning and running usability tests, and turning results into fixes.

- 24.1 Evaluation strategy: what to measure, and when
- 24.2 Usability testing AI features
- 24.3 Benchmarks and UX metrics for AI
- 24.4 Evals for LLM features
- 24.5 LLM as judge, and human rating
- 24.6 Red-teaming and safety testing
- 24.7 Experiments and A/B tests
- 24.8 Reporting and acting on findings
- Project: An evaluation of an AI feature, from plan to readout

### Unit 25: Ship and present

Polishing your work, handing it off, and presenting it with confidence.

- 25.1 Choose and scope your final project
- 25.2 Plan an AI-assisted workflow
- 25.3 Design the core experience
- 25.4 Build with AI coding tools
- 25.5 Add the AI feature
- 25.6 Test and iterate
- 25.7 Ship it
- 25.8 Present and pitch
- Project: Your final project: an AI-assisted product, shipped and presented

## Part 6: Agentic Design (Units 26–29, optional, bootcamp)

### Unit 26: Get hired with AI

The job market and its roles, an AI-assisted search, case studies, an AI-friendly portfolio and resume, and interviews.

- 26.1 The design job market and its roles
- 26.2 An AI-assisted job search
- 26.3 Case studies that get read
- 26.4 An AI-friendly portfolio
- 26.5 Build your portfolio with AI
- 26.6 Deploy with Vercel or Cloudflare
- 26.7 An AI-friendly resume
- 26.8 Interviews and portfolio reviews
- Unit project

### Unit 27: Human-AI interaction (HAX)

Trust, explainability, uncertainty, feedback, correction and control: the craft of the relationship between a person and a model.

- 27.1 What makes an AI interface different
- 27.2 Trust, and how to calibrate it
- 27.3 Explainability that earns its space
- 27.4 Showing uncertainty honestly
- 27.5 Feedback worth collecting
- 27.6 Correction and recovery
- 27.7 Control, defaults and consent
- 27.8 Putting it together: a HAX review
- Unit project

### Unit 28: Agentic UX design

Designing software that acts for people: autonomy levels, approvals, delegation, status and stepping in mid-flight.

- 28.1 From assistant to agent
- 28.2 Levels of autonomy
- 28.3 Approvals people can actually give
- 28.4 Handing work over
- 28.5 Making invisible work legible
- 28.6 Pause, steer, stop, undo
- 28.7 Earning a longer leash
- 28.8 A flow from trigger to report
- Unit project

### Unit 29: Prompt engineering for design

Prompts that produce usable design work: frameworks, structure, Claude for design tasks, Figma Make, images and testing.

- 29.1 Why prompts fail
- 29.2 Frameworks worth knowing
- 29.3 Structure the prompt, structure the output
- 29.4 Claude for design work, task by task
- 29.5 Building designs with Figma Make
- 29.6 Prompting with pictures
- 29.7 Testing prompts
- 29.8 Your prompt library
- Unit project

## Learn Figma free (25 lessons)

### Lessons 1 to 7: Find your way around

The canvas, frames, shapes, text, colour, the pen and constraints, in a real editor in your browser.
- 1. The canvas: https://www.uxuiopen.com/learn-figma-free/canvas
- 2. Frames and layers: https://www.uxuiopen.com/learn-figma-free/frames-and-layers
- 3. Shapes and the properties panel: https://www.uxuiopen.com/learn-figma-free/shapes
- 4. Text: https://www.uxuiopen.com/learn-figma-free/text
- 5. Colour, images and effects: https://www.uxuiopen.com/learn-figma-free/colour-and-effects
- 6. Pen and vectors: https://www.uxuiopen.com/learn-figma-free/pen-and-vectors
- 7. Constraints and layout grids: https://www.uxuiopen.com/learn-figma-free/constraints

### Lessons 8 to 14: Build Wander's design kit

Auto layout, styles, components, variants and variables, building the kit for Wander, a travel app.
- 8. Auto layout: https://www.uxuiopen.com/learn-figma-free/auto-layout
- 9. Auto layout in depth: https://www.uxuiopen.com/learn-figma-free/auto-layout-in-depth
- 10. Colour and text styles: https://www.uxuiopen.com/learn-figma-free/styles
- 11. Components: https://www.uxuiopen.com/learn-figma-free/components
- 12. Variants: https://www.uxuiopen.com/learn-figma-free/variants
- 13. Variables and modes: https://www.uxuiopen.com/learn-figma-free/variables
- 14. The sticker sheet: https://www.uxuiopen.com/learn-figma-free/sticker-sheet

### Lessons 15 to 19: Design Wander's screens

Grids, hierarchy, accessible colour, icons and navigation across Wander's screens.
- 15. Grids, spacing and containment: https://www.uxuiopen.com/learn-figma-free/layout-and-spacing
- 16. Visual hierarchy: https://www.uxuiopen.com/learn-figma-free/hierarchy
- 17. Colour and accessibility: https://www.uxuiopen.com/learn-figma-free/colour-and-accessibility
- 18. Icons and images: https://www.uxuiopen.com/learn-figma-free/icons-and-images
- 19. Navigation: https://www.uxuiopen.com/learn-figma-free/navigation

### Lessons 20 to 23: Prototype and test

Prototyping, smart animate, overlays and scrolling, then test Wander and iterate.
- 20. Prototyping basics: https://www.uxuiopen.com/learn-figma-free/prototyping
- 21. Smart animate and interactive components: https://www.uxuiopen.com/learn-figma-free/motion
- 22. Overlays and scrolling: https://www.uxuiopen.com/learn-figma-free/overlays-and-scrolling
- 23. Test and iterate: https://www.uxuiopen.com/learn-figma-free/test-and-iterate

### Lessons 24 to 25: Hand off and showcase

Hand Wander off to developers and turn it into a portfolio case study.
- 24. Hand off to developers: https://www.uxuiopen.com/learn-figma-free/hand-off
- 25. Final project: your case study: https://www.uxuiopen.com/learn-figma-free/final-project

## Free UX games

- Pip's Big Day: Pip has eight errands and a phone full of broken apps. Fix each screen with Fitts, Hick, contrast and more. https://www.uxuiopen.com/play/pips-big-day
- Your first week at Sleepify: Play a junior designer's week: interview users, frame the problem, catch ideas, prototype and test. https://www.uxuiopen.com/game
- Sprout Ships It: Make seven real product calls, from the first interview to launch day, and watch Sprout grow. https://www.uxuiopen.com/play/sprout-ships-it
- Dark Pattern Detective: Eight ordinary looking interfaces, each hiding one manipulation. Find it before your leads run out. https://www.uxuiopen.com/play/dark-patterns
- Test Flight: Run ten usability tests on an airline prototype: watch, diagnose the principle, fix the flow, retest. https://www.uxuiopen.com/play/test-flight
- Handoff: Your checkout goes to developers tomorrow. Fix eight review comments in a real-feeling Figma file. https://www.uxuiopen.com/play/handoff