Figma for UX Design

A step-by-step reference guide. Made for beginners. Each page covers one specific thing — plain language, numbered steps, no skipped clicks. Work through the chapters in order, or jump to whatever you need.

Chapters

Chapter 1

Getting Started

Frames, layers, shapes, text, components, and auto layout basics — everything a beginner needs

 Chapter 2

Cards & Lists

Auto layout mastery, nested frames, reusable card components, building scrollable lists

 Chapter 3

Navigation & Structure

Bottom nav bars, tabs, fixed elements, scroll behavior, and prototyping navigation flows

 Chapter 4

Forms & Inputs

Text inputs, dropdowns, radio buttons, checkboxes, form validation, and conditional buttons

 Chapter 5

States & Micro-interactions

Multi-property variants, hover/press states, smart animate, bottom sheets, and modals

 Chapter 6

Responsive Design & Handoff

Constraints, breakpoints, exporting, developer handoff — everything for production-ready UI

Quick Reference — All Lessons

Chapter 1: Getting Started

  1. What is a frame?
  2. The Layers panel
  3. Rectangles & shapes
  4. Text basics
  5. What is a component?
  6. Auto layout basics

Chapter 2: Cards & Lists

  1. Align items left and right using Space Between
  2. Nest auto layouts inside each other
  3. Understand Hug vs Fixed vs Fill
  4. Make a card component from scratch
  5. Add changeable text properties to a component
  6. Stack multiple cards in a vertical list
  7. Add scroll to a long list

Chapter 3: Navigation & Structure

  1. Build a bottom nav bar with auto layout
  2. Create active and inactive nav states using variants
  3. Prototype: tap nav icons to switch between screens
  4. Create tabs with an underline indicator
  5. Prototype: tap tabs to switch content panels
  6. Design fixed headers and scrollable body areas

Chapter 4: Forms & Inputs

  1. Build a text input field
  2. Create input variants (empty, filled, active, error)
  3. Prototype: show error state on empty form submit
  4. Build a dropdown select component
  5. Build radio button and checkbox components
  6. Prototype: conditional button states (disabled to enabled)

Chapter 5: States & Micro-interactions

  1. Create multi-property variants
  2. Use boolean properties (show/hide elements)
  3. Prototype: while hovering and while pressing interactions
  4. Create smart animate transitions between variants
  5. Build a bottom sheet component
  6. Prototype: bottom sheet overlay with smart animate
  7. Build a modal component
  8. Prototype: modal open and close with backdrop dismiss

Chapter 6: Responsive Design & Handoff

  1. Understand constraints
  2. Use auto layout wrapping
  3. Apply min and max width to components
  4. Test design on different frame sizes
  5. Prototype: connect a full multi-screen flow
  6. Export individual assets
  7. Batch export assets at multiple scales
  8. Developer handoff basics