Prototyping

Prototyping

Build interactive prototypes that simulate real product behavior for testing and stakeholder demonstrations.

When to Use This Skill

• Usability testing
• Stakeholder demos
• Developer handoff
• User flow validation
• Animation testing
• Interaction design
• Concept validation
• Investor presentations

Core Concepts

1. Prototype Fidelity Levels

Low-Fidelity:

• Paper prototypes
• Clickable wireframes
• Basic navigation
• Fast iteration

Medium-Fidelity:

• Interactive wireframes
• Some content
• Basic interactions
• User flow testing

High-Fidelity:

• Visual design applied
• Real content
• Animations
• Full interactions
• Near-production quality

2. Figma Prototype Setup

## Prototype Configuration

**Device**: iPhone 14 Pro (393x852)
**Starting Frame**: Homepage

**Interactions**:
1. Homepage → Product Page
   - Trigger: Click on product card
   - Action: Navigate to
   - Animation: Slide left
   - Duration: 300ms
   - Easing: Ease out

2. Add to Cart Button
   - Trigger: Click
   - Action: Change to "Added!"
   - Animation: None
   - Reset after: 2s

3. Navigation Menu
   - Trigger: Click hamburger icon
   - Action: Overlay menu
   - Animation: Slide in from left
   - Duration: 250ms

4. Form Field Focus
   - Trigger: Focus
   - Action: Change to focus state
   - Animation: None

Best Practices

1. Define purpose - Testing vs presentation
2. Match fidelity - To stage of design
3. Use real content - Authentic scenarios
4. Limit flows - Focus on key tasks
5. Include states - Loading, error, success
6. Test interactions - Before user testing
7. Document flows - Clear navigation map
8. Gather feedback - Iterate based on testing

Resources

• Figma Prototyping: Interactive design
• Principle: Animation prototyping
• ProtoPie: Advanced interactions