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
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):
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
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:
