Summary of "UI/UX Design Courses Roadmap 2026 [100% FREE] | Beginner To Advanced | Saptarshi Prakash"
High-level summary
This is a structured 2026 UX/UI learning roadmap for complete beginners that avoids “tutorial hell” by prescribing a strict order, short practical exercises, and portfolio-focused projects. The roadmap is organized into three progressive parts:
- Design fundamentals
- Figma (tools + ecosystem)
- AI + practice
A single full certification program (IBM) is offered as an alternative “all-in-one” path.
Core lessons: order matters (each step builds on the previous), practice while you learn (build real projects, not just collect certificates), learn to present and collaborate, and adopt AI early as a design tool (ethically and practically).
Detailed course list (recommended order)
The courses are listed in the order the presenter recommends. Spend the most time on fundamentals before moving into tools and AI-driven practice.
A. Design fundamentals
-
Canva Design School — Graphic Design Essentials
- Difficulty: Beginner. Free. ~53 minutes. Certificate available.
- Key topics: design elements (line, shape, space, texture); design principles in action (contrast, hierarchy, balance); color theory and Canva color tools; mood boards.
- Outcome: intentional visual choices, a certificate, and a 25-question test to reinforce learning.
-
IBM SkillsBuild — Principles of Design
- Difficulty: Beginner. Free. Earnable badges.
- Key topics: reinforces design principles with pro commentary; introduces Adobe Suite basics (Photoshop, Illustrator, InDesign) to understand tool roles.
- Outcome: workplace context and an IBM digital badge.
-
Coursera + Adobe — Design Fundamentals with AI
- Difficulty: Beginner → Intermediate. Not free (financial aid available). Certificate.
- Key topics: Adobe Express + Firefly generative AI; composition; brand kits; logo & template work; practical deliverables; color & typography revision; client workflows & collaboration.
- Outcome: hands-on deliverables from day one and experience using generative AI within design workflows.
-
Coursera + University of Michigan — Introduction to UX Principles and Processes
- Difficulty: Intermediate. Part of a UX specialization (financial aid available).
- Key topics: UX research vs UX design; interviews; evaluations; sketching/prototyping for testing ideas; human behavior basics (cognitive factors); micro usability testing.
- Outcome: foundational UX research/design knowledge and a path to deeper specialization.
Suggested reference
- Bookmark and repeatedly use a Gestalt principles resource (proximity, similarity, continuity, figure-ground, etc.) and apply it across courses.
B. Figma and its ecosystem (tool fluency, collaboration, production)
Note: Expect a medium time investment here only after fundamentals are solid.
-
Figma Basics
- Free, ~1 hour, 12 concise videos.
- Key topics: frames/groups, auto layout, components, text/shapes, prototyping + motion, collaboration & sharing, handoff.
- Outcome: practical Figma workflow knowledge and collaboration practices.
-
Figma Slides (LinkedIn Learning)
- Difficulty: Beginner. Two short courses.
- Key topics: build presentation decks inside Figma using existing components/styles; reduce context switching; use AI-assisted features for slide content.
- Outcome: faster presentations, live-editable decks tied to design files.
-
Figma Sites (launched 2025)
- Difficulty: Intermediate. Open beta; documentation & videos.
- Key topics: design → publish web pages with responsive layouts, breakpoints, auto layout, interactions/animations (hover, scroll, transitions) with no-code publishing.
- Recommendation: if comfortable, also evaluate Framer (presented as more powerful for some use cases).
-
Figma MCP (Model Context Protocol)
- Difficulty: Intermediate / technical.
- Key topics: MCP standard lets AI coding tools read Figma structure to generate code (components, tokens, constraints). Docs show desktop/remote server setup, connecting to Cursor/VS Code/Claude Code, and “code connect” to align codebase with design naming conventions.
- Outcome: structure files for accurate AI-assisted code generation and become a stronger collaborator with engineering.
C. AI + practice (apply skills; short courses + hands-on loop)
-
AI-driven Product Designer (LinkedIn Learning)
- Purpose: perspective course on how AI changes the designer role, workflows beyond Figma, and ethics/responsibility.
-
UX Writing with AI (UX Writing Hub)
- Difficulty: Beginner. Free 7-day program.
- Key topics: microcopy, content-first design, voice & tone, content guidelines, UX research for content (conversation maps, testing). Use Claude to iterate copy and critique outputs.
- Outcome: ability to write and test microcopy that improves UX.
-
Vibe Coding with Lovable (LinkedIn Learning)
- Difficulty: Beginner → Intermediate.
- Key topics: describe in plain language and AI builds a working UI/prototype; full workflow from ideation → publish; limitations and when to involve developers.
- Outcome: prototype a working product quickly and gain confidence in AI-driven prototyping.
Practice resources and exercises (explicit recommendations)
- Build a practice loop: generate UI with Claude (or Vibe Coding), import to Figma, evaluate against design principles, redesign, iterate.
- Shape of AI: use this reference for AI interface design patterns (chat interfaces, streaming responses, loading/error/empty states). Replicate and improve existing AI products in Figma and document decisions as portfolio projects.
- Daily UI Challenge: start a 100-day challenge concurrently to build variety and a portfolio of components/pages.
- Publish publicly: post progress and projects for accountability and visibility.
- Pair UX writing course + Claude for copy generation, then critique and refine outputs.
- Use Lovable (or similar) to go from idea → live prototype in one session to build confidence.
Alternative / full certification
IBM UI UX Designer Professional Certificate (Coursera)
- Difficulty: Beginner → Intermediate. ~4 months.
- Covers: UX & UI fundamentals; Agile/Scrum in workflows; research & information architecture (interviews, surveys, affinity mapping, personas, card sorting, tree testing); Figma hands-on UI work (wireframes → high-fidelity prototypes); design systems; generative AI for personas/empathy maps/microcopy; capstone project producing developer-ready handoffs, portfolio case study, and UX resume.
- Who it’s for: learners who prefer a single, branded, structured program rather than piecing many courses together. Expect overlap if you already follow the modular roadmap.
Overarching methodology — step-by-step instructions (how to use this roadmap)
- Adopt the mindset: avoid tutorial accumulation. Order and practice matter more than certificates.
- Start with fundamentals (Canva → IBM → Adobe/Coursera) until you can articulate visual choices and build mood boards.
- Immediately integrate AI into fundamentals (Adobe + Firefly course) so design habits include AI tools from the start.
- Move into UX principles (University of Michigan course) to learn research, micro-usability testing, and cognitive factors.
- Bookmark and use the Gestalt principles resource continuously while learning.
- Learn Figma basics thoroughly (frames, auto layout, components, prototyping, collaboration).
- Learn presentation and publishing features in the Figma ecosystem (Slides → Sites) only after mastering auto layout.
- Learn MCP and how AI/code tooling connects to Figma so you can prepare design files for AI-assisted code generation.
- Parallel practice: take short AI + applied courses (UX writing with AI, Vibe Coding) and build daily projects (Daily UI, Shape of AI exercises).
- Build a feedback loop: generate AI outputs → import to Figma → evaluate against principles → refine → document decisions.
- Publish work publicly and build portfolio case studies (explain decisions, show iterations, include usability testing).
- If you want a single credential and a guided capstone, choose the IBM Professional Certificate after (or instead of) the modular path.
Practical tips and cautions
- If fundamentals are weak, stop and fix that before diving deeper into tools or advanced Figma features.
- Don’t try to master Adobe tools immediately — just learn what each tool is for.
- Use financial aid for Coursera courses if needed (the video roadmap promises a guide).
- Treat UX writing as part of design; bad microcopy can ruin otherwise good designs.
- Learn to present: Figma Slides is worth learning because presentation is part of the job.
- Understand ethical use of AI and the limits of Vibe Coding — know when to involve a developer.
- Consistency beats talent: block time, practice daily, and stay curious.
Speakers, sources, tools and standards mentioned
- Speaker / presenter: Saptarshi Prakash (video author/presenter)
- Course platforms & providers: Canva Design School; IBM SkillsBuild; Coursera; Adobe (Adobe Express, Firefly); University of Michigan (Coursera); LinkedIn Learning; UX Writing Hub; IBM (UI UX Professional Certificate); Lovable (Vibe Coding); Framer
- Tools, standards & AI: Figma (Slides, Sites, Make/Draw/Buzz features); MCP (Model Context Protocol); Cursor; VS Code; Claude / Claude Code; Shape of AI; Daily UI challenge
- Other references: Figma developer advocate (featured in MCP docs/videos)
Category
Educational
Share this summary
Is the summary off?
If you think the summary is inaccurate, you can reprocess it with the latest model.