Prototype Designer

Validate ideas through interactive prototypes before writing code.

Core Principle

Test before you build.

Prototypes let you:

• Validate assumptions
• Test with real users
• Iterate faster than code
• Communicate ideas clearly
• Reduce development waste

Phase 1: Choosing Prototyping Tools

Tool Comparison

Quick Start Recommendations

Beginner: Start with Figma

• Built-in to design tool
• No separate app needed
• Intuitive interactions
• Free for individuals

Advanced: Graduate to Framer or ProtoPie

• More complex interactions
• Variable support
• Conditional logic
• Sensor integration (mobile)

Phase 2: User Flow Design

What is a User Flow?

A user flow shows the path users take through your app to complete a task.

Example: User Registration Flow

Start
  ↓
Landing Page
  ↓
Click "Sign Up"
  ↓
Email Entry → Validation
  ↓ [Valid]
Password Entry → Validation
  ↓ [Valid]
Success Screen
  ↓
Onboarding Flow

Creating User Flows in Figma

1. Create Flow Frames:

Frames needed:
├── 01-landing
├── 02-signup-form
├── 03-email-verification
├── 04-success
└── 05-onboarding-step-1

2. Add Interactions:

Click "Sign Up" button → Navigate to 02-signup-form
Click "Submit" → Navigate to 03-email-verification
Click "Continue" → Navigate to 04-success

3. Add Overlays:

Error states:
- Show "Error: Invalid email" overlay
- Show "Error: Password too weak" overlay

User Flow Template

// user-flows.ts

interface UserFlow {
  id: string
  name: string
  description: string
  steps: FlowStep[]
  alternativePaths: AlternativePath[]
}

interface FlowStep {
  id: string
  screen: string
  action: string
  nextStep: string
  conditions?: string[]
}

interface AlternativePath {
  trigger: string
  steps: FlowStep[]
  destination: string
}

export const signupFlow: UserFlow = {
  id: 'signup',
  name: 'User Registration',
  description: 'User signs up for an account',
  steps: [
    {
      id: '1',
      screen: 'Landing Page',
      action: 'Click "Sign Up"',
      nextStep: '2'
    },
    {
      id: '2',
      screen: 'Sign Up Form',
      action: 'Enter email and password',
      nextStep: '3',
      conditions: ['Email valid', 'Password strong']
    },
    {
      id: '3',
      screen: 'Email Verification',
      action: 'Enter verification code',
      nextStep: '4',
      conditions: ['Code valid']
    },
    {
      id: '4',
      screen: 'Success',
      action: 'Click "Get Started"',
      nextStep: '5'
    }
  ],
  alternativePaths: [
    {
      trigger: 'Invalid email',
      steps: [
        {
          id: 'error-1',
          screen: 'Sign Up Form',
          action: 'Show error message',
          nextStep: '2'
        }
      ],
      destination: 'Step 2'
    }
  ]
}

Phase 3: Interactive Prototyping

Figma Prototyping Basics

1. Basic Click Navigation:

Select element → Prototype panel → Add interaction
- Trigger: On click
- Action: Navigate to
- Destination: Screen name
- Animation: Instant / Dissolve / Slide / Push

2. Hover States:

Button → Prototype panel
- Trigger: While hovering
- Action: Change to
- Destination: Button-hover variant

3. Scroll Behavior:

Frame → Prototype panel
- Overflow behavior: Vertical scrolling
- Set scroll position (optional)

4. Smart Animate:

Two frames with matching layer names
- Animation: Smart animate
- Easing: Ease out
- Duration: 300ms

Advanced Interactions

Conditional Logic (Variables):

// Figma Variables (Beta)
Variables:
  - isLoggedIn: Boolean
  - userType: String
  - itemCount: Number

Conditional:
  IF isLoggedIn = true
    THEN Navigate to Dashboard
  ELSE
    THEN Navigate to Login

Multi-Step Forms:

Step 1 (Name) → Validation
  ↓ [Valid]
Step 2 (Email) → Validation
  ↓ [Valid]
Step 3 (Password) → Validation
  ↓ [Valid]
Success Screen

State Management:

Component: Button
States:
  - Default
  - Hover
  - Pressed
  - Disabled
  - Loading

Prototype:
  On click → Change to "Loading"
  After delay → Navigate to next screen

Phase 4: Framer Prototyping

When to Use Framer

Use Framer for:

• Complex animations
• Code-driven interactions
• Real data integration
• Advanced logic
• Production-ready components

Framer Code Component Example

// components/Counter.tsx

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: 16
      }}
    >
      <h1 style={{ fontSize: 48 }}>{count}</h1>
      <div style={{ display: 'flex', gap: 8 }}>
        <button
          onClick={() => setCount(count - 1)}
          style={{
            padding: '12px 24px',
            fontSize: 16,
            borderRadius: