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

Tool	Best For	Learning Curve	Fidelity
Figma	Full designs, collaboration	Medium	High
Framer	Code-based, advanced interactions	High	Very High
ProtoPie	Complex interactions, sensors	Medium	Very High
Adobe XD	Adobe ecosystem users	Low	High
InVision	Design handoff, simple clicks	Low	Medium
Axure	Complex logic, documentation	High	High

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: