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