Prototype Designer

What this skill does

# 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

```typescript
// 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):**

```typescript
// 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

```tsx
// 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: 8,
            border: 'none',
            cursor: 'pointer',
            background: '#0066cc',
            color: 'white'
          }}
        >
          -
        </button>
        <button
          onClick={() => setCount(count + 1)}
          style={{
            padding: '12px 24px',
            fontSize: 16,
            borderRadius: 8,
            border: 'none',
            cursor: 'pointer',
            background: '#0066cc',
            color: 'white'
          }}
        >
          +
        </button>
      </div>
    </div>
  )
}
```

### Framer Motion Animations

```tsx
// components/AnimatedCard.tsx

import { motion } from 'framer-motion'

export function AnimatedCard() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      style={{
        width: 300,
        height: 200,
        background: 'white',
        borderRadius: 16,
        padding: 24,
        boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
        cursor: 'pointer'
      }}
    >
      <h2>Card Title</h2>
      <p>Hover or click me!</p>
    </motion.div>
  )
}
```

---

## Phase 5: Prototype Testing

### Usability Testing Plan

**1. Define Goals:**

- What do you want to learn?
- What tasks should users complete?
- What metrics will you measure?

**2. Recruit Participants:**

- 5-8 participants (enough to find major issues)
- Match your target audience
- Diverse backgrounds

**3. Create Test Script:**

```markdown
# Prototype Usability Test Script

## Introduction (2 min)

"Thank you for helping us test this prototype. There are no wrong answers - we're testing the design, not you. Please think aloud as you complete tasks."

## Tasks (20 min)

### Task 1: Sign Up

"Imagine you want to create an account. Show me how you would do that."

Success criteria:

- [ ] Found sign up button
- [ ] Entered email
- [ ] Entered password
- [ ] Completed verification
- [ ] Reached dashboard

### Task 2: Find Settings

"You want to change your notification preferences. Show me how you would do that."

Success criteria:

- [ ] Navigated to settings
- [ ] Found notifications section
- [ ] Changed setting
- [ ] Saved changes

## Questions (5 min)

1. What was the easiest part?
2. What was the hardest par