Figma 2026 UX/UI Design Bootcamp

The complete guide to auto-layout: padding, spacing, direction, wrapping, and nesting. Includes five practice exercises.

Turning repeated elements into reusable components. How to think about component boundaries and naming.

Organizing component variants by size, state, and color. Naming conventions that keep large libraries searchable.

Building buttons, toggles, and tabs that respond to clicks without leaving component editing mode.

Creating smooth animations between frames using Smart Animate. When it works, when it doesn't, and what to do instead.

Practical ways to use Figma's AI tools for layout suggestions, content generation, and quick iterations without losing creative control.

Making layouts adapt to different screen sizes. Constraint settings, breakpoint strategies, and testing responsive behavior.

A curated list of plugins for icon management, content population, accessibility checks, and asset organization.

Sharing files, leaving contextual feedback, running design reviews, and managing async collaboration across time zones.

Using version history to protect your work. Branching for experiments without risking the main file.

What developers see in Dev Mode, how to annotate your designs, and settings that make handoff cleaner.

How to structure component libraries with atoms, molecules, and organisms. Naming, nesting, and documentation patterns.

Swapping nested instances to build flexible layouts without exploding your component count.

Setting up design tokens with variables for color, spacing, radius, and opacity. One system, multiple themes and platforms.

Using variables and conditions to build prototypes that branch based on user input. Close to real-app behavior.

Fine-tuning motion with custom curves, staggered delays, and multi-step transitions for polished interactions.

A hands-on project creating a button library with size, color, icon, and state variants that stay manageable.

Checking color contrast, designing focus states, and structuring files so screen reader annotations are possible.

Why files slow down and practical fixes: image optimization, component reduction, and memory-aware layer management.

Writing usage guidelines, do's and don'ts, and component specs directly in your Figma library files.

Audit existing patterns, define scope, set up the file structure, and create a rollout plan before designing anything.

Creating the base layer of your system: spacing scale, typography ramp, color tokens, and shadow definitions.

Designing the components every product needs with proper states, variants, and documentation.

Tackling higher-complexity components that require flexible slots, conditional content, and responsive behavior.

Using variable modes to switch between light, dark, and brand themes without duplicating components.

Approaching layouts from the smallest screen up. Column grids, touch targets, and mobile-specific patterns.

Connecting dozens of screens into realistic flows with back navigation, conditional paths, and scroll behaviors.

Designing subtle feedback animations for loading, success, error, and empty states that help users understand what happened.

Setting up prototypes for usability tests. What to prepare, how to share, and how to interpret feedback.

Annotating behavior, exporting assets correctly, documenting edge cases, and setting up Dev Mode for your team.

Using Figma's presentation mode, building case study slides, and framing design decisions around business outcomes.

Managing external stakeholders in shared files, running design sprints, and keeping feedback organized.

Defining scope, user personas, and the feature set for a portfolio-ready mobile app project.

Sketching user flows, building low-fidelity wireframes, and defining the information architecture.

Applying your design system to the wireframes. Color, typography, spacing, and component selection.

Building the interactive prototype and writing a case study that documents your process and decisions.

Planning a data-heavy web dashboard with complex navigation, tables, and chart components.

Designing chart types, stat cards, and data tables that work at different viewport sizes.

Assembling the complete dashboard with responsive layouts, filters, and interactive states.

Preparing specs, exporting assets, and documenting the dashboard for a realistic handoff scenario.

How to give and receive design feedback constructively. A framework you can use with peers or in interviews.

Structuring case studies, choosing the right projects, and presenting your work on Behance, Dribbble, or a personal site.

Common design challenge formats, time management strategies, and how to talk through your process out loud.

Managing client files, setting up shared libraries, scoping projects, and protecting your intellectual property.

Communities, resources, and habits for staying sharp as Figma and the design field continue to evolve.