Prototyping Tools

Before writing code, prototyping lets you test ideas quickly and cheaply. Figma is the industry standard — and it's free for individual use.

Why Prototype?

A wireframe takes 30 minutes. Rebuilding a coded feature takes days. Always prototype first for anything non-trivial.

Levels of Fidelity

Start low, go high only when needed. Most decisions can be made at the wireframe level.

Figma for Developers

The Interface

┌─────────────────────────────────────────┐
│ Toolbar (top)                           │
├────────┬────────────────────┬───────────┤
│ Layers │                    │ Properties│
│ Panel  │    Canvas          │ Panel     │
│ (left) │                    │ (right)   │
│        │                    │           │
├────────┴────────────────────┴───────────┤
│ Assets / Components (bottom-left)       │
└─────────────────────────────────────────┘

Essential Tools

Frames = Divs

In Figma, a Frame is like an HTML <div>. It's a container that holds other elements.

Frame (page)
├── Frame (header)
│   ├── Logo
│   └── Frame (nav)
│       ├── Link 1
│       ├── Link 2
│       └── Link 3
├── Frame (hero)
│   ├── Heading
│   ├── Paragraph
│   └── Button
└── Frame (footer)

Start with a frame for your page (set it to a device width like 1440px for desktop or 375px for mobile).

Auto Layout

Auto Layout is Figma's equivalent of Flexbox. It automatically spaces child elements.

Auto Layout (horizontal, gap: 16px, padding: 24px)
┌──────────────────────────────────────┐
│  [Button 1]  [Button 2]  [Button 3] │
└──────────────────────────────────────┘

Auto Layout (vertical, gap: 8px, padding: 16px)
┌──────────────┐
│  List Item 1 │
│  List Item 2 │
│  List Item 3 │
└──────────────┘

Select a frame and press Shift + A to add Auto Layout. Set:

• Direction — horizontal or vertical
• Gap — space between items
• Padding — space inside the frame
• Alignment — how items align within the frame

This maps directly to CSS:

/* The Figma Auto Layout above = this CSS */
.container {
  display: flex;
  flex-direction: row;    /* or column */
  gap: 16px;
  padding: 24px;
}

Components

Components are reusable elements — like React components. Create them for anything you use more than once.

1. Design a button
2. Select it
3. Press Ctrl/Cmd + Alt + K to create a component
4. Now you can insert instances of it anywhere
5. Change the main component → all instances update

Variants let you define states (default, hover, disabled) within one component.

Building a Wireframe

Step-by-Step Process

1. Create a frame — set it to your target device size
2. Block out major sections — header, hero, content, footer (gray rectangles)
3. Add structure — navigation items, headings, content areas
4. Add real text — use actual words, not "Lorem ipsum"
5. Add basic interactions — link frames together for clickable prototype

Wireframe Style Guide

Keep wireframes intentionally ugly so stakeholders focus on structure, not aesthetics:

Colors:  White, light gray (#F5F5F5), dark gray (#333333)
Font:    One font, two sizes (16px body, 24px headings)
Images:  Gray rectangles with an X through them
Buttons: Rectangles with text labels
Icons:   Simple shapes or text labels ("[icon]")

Interactive Prototyping

Connecting Frames

1. Switch to Prototype mode (top-right tab)
2. Select an element (e.g., a button)
3. Drag the blue circle to the destination frame
4. Set the interaction:
   • Trigger — On click, on hover, on drag
   • Action — Navigate to, open overlay, scroll to
   • Animation — Dissolve, slide, push

Testing Your Prototype

Press the play button (▶) to enter presentation mode. Click through your prototype as a user would.

Share the prototype link with others for feedback. They can view and interact without a Figma account.

Developer Handoff

Inspect Mode

Developers can use Figma's Dev Mode to inspect designs:

• Click any element to see its CSS properties
• Copy CSS, iOS, or Android code snippets
• See spacing between elements
• Export assets in any format

What to Look For

Design Tokens

Extract design decisions into reusable values:

/* Tokens from your Figma file */
:root {
  --color-primary: #2563eb;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
  --space-4: 16px;
  --space-6: 24px;
}

This creates a shared language between design and code.

Summary

• Prototype before you code — it's 10x faster to iterate on a wireframe
• Start with low-fidelity wireframes, increase fidelity only when needed
• Figma Frames = HTML divs, Auto Layout = Flexbox
• Create components for reusable elements — just like React components
• Use Prototype mode to create clickable flows for user testing
• Dev Mode gives you CSS properties, spacing, and exportable assets