Figma UI/UX Design: Beginner to Expert

Components let you reuse design elements and update them in one place. You'll build a button component, learn about instances, and see how overrides work.

Combine multiple states and sizes into a single component using variants. We'll set up a button component with primary, secondary, and ghost variants plus different sizes.

Auto layout is Figma's most powerful feature for UI design. You'll learn padding, spacing, direction, and how to make elements that resize properly when content changes.

Use auto layout and components to create a navigation bar that works across different screen sizes. Includes mobile hamburger menu patterns.

A problem-solving session on text fields, dropdowns, checkboxes, radio buttons, and form validation states. You'll build a complete form component library.

Cards and lists are everywhere in modern interfaces. You'll design a flexible card component with image, text, and action slots, then build list views from them.

How to handle images in Figma, including fills, image masks, clipping, and building image placeholder components that update easily.

Where to find icons, how to import and manage them as components, and a quick session on designing your own simple icons with the pen tool.

Design modals and overlays that look and behave correctly. You'll build a reusable modal component with header, body, and footer slots.

Variables are Figma's approach to design tokens. You'll create color, number, and string variables and see how they connect to your styles and components.

An overview of Figma's prototyping panel, connection types, and how to switch from design mode to prototype mode. You'll build a simple two-screen flow by the end.

Instant, dissolve, move, slide, and push transitions explained with practical examples. You'll learn which transition fits which interaction pattern.

Connect component variants to create hover, pressed, and focus states that respond to user interaction without leaving the component.

Set up scrollable areas, horizontal carousels, and fixed headers. A practical walkthrough of common scroll patterns in product interfaces.

Smart Animate matches layers between frames to create fluid animations. You'll build a tab switcher and a page transition using this technique.

Use variables to track state across your prototype. Set up conditional logic, counters, and dynamic text that changes based on user actions.

A full project where you prototype a multi-step checkout flow. Covers navigation, form interactions, success states, and error handling.

How to share prototypes with stakeholders, get feedback using Figma's commenting system, and present flows in meetings and reviews.

Not every project needs a design system, but when one does, it needs to be built right. We'll look at real design systems and identify what makes them work.

Before building anything, you need a plan. You'll map out your system's foundations: colors, typography, spacing, and elevation scales.

Convert your design decisions into Figma variables organized in collections. Set up semantic naming like 'color/text/primary' instead of 'blue-500'.

A detailed walkthrough of creating a button system with variants for type, size, state, and icon placement. Includes nested component patterns.

Apply the same architectural approach to form inputs. Covers text fields, selects, textareas, and how to handle labels, helpers, and error messages.

Create type scales and spacing scales using variables. Learn how to connect them to components so changes propagate automatically.

Use variable modes to switch between light and dark themes across your entire design. A step-by-step setup that works with any component library.

Set up column grids, define breakpoints, and create layout components that adapt. Covers both mobile-first and desktop-first approaches.

Good documentation makes a design system usable. You'll create component specs, usage guidelines, and do/don't examples within your Figma file.

Design systems need ongoing care. Learn how to handle updates, communicate changes, and avoid breaking existing designs when you modify components.

A complete walkthrough of building a design system for a SaaS dashboard product. Covers every decision from color choices to component architecture.

How to import, reference, and customize external component libraries. Includes working with popular open-source systems as a starting point.

File structure, page naming, cover pages, and section organization. The patterns that keep large team projects from becoming chaos.

A curated list of plugins for content generation, accessibility checks, design linting, and developer handoff. No fluff, just the ones professionals actually use.

How to set up your files so developers can inspect, measure, and extract what they need. Covers Dev Mode, specs, and redlines.

Learn to document interactions, edge cases, and responsive behavior directly in Figma. Includes real annotation examples from product teams.

Color contrast, touch target sizes, focus states, and screen reader considerations. You'll audit an existing design and fix common accessibility issues.

How to connect research findings to design decisions. Covers journey maps, personas, and how to use Figma for research synthesis.

Framework for structured design critiques. How to present your work, ask the right questions, and process feedback constructively.

A step-by-step guide to turning your course projects into portfolio case studies. Covers storytelling, process documentation, and presentation layout.

Managing client projects in Figma. Covers project setup, version management, client feedback loops, and file delivery formats.

How to present Figma files in design interviews, talk through your process, and handle live design challenges. Includes common interview formats.

Resources, communities, and habits for keeping your skills sharp as Figma and the design industry evolve. Includes what's on the horizon in 2026.

A final project that combines every skill from the course. You'll design a feature from research insights to handoff-ready prototypes using your own design system.