| name | prototyping |
| description | Master prototyping with interactive mockups, user flows, animations, and high-fidelity prototypes for user testing. |
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
- Define purpose - Testing vs presentation
- Match fidelity - To stage of design
- Use real content - Authentic scenarios
- Limit flows - Focus on key tasks
- Include states - Loading, error, success
- Test interactions - Before user testing
- Document flows - Clear navigation map
- Gather feedback - Iterate based on testing
Resources
- Figma Prototyping: Interactive design
- Principle: Animation prototyping
- ProtoPie: Advanced interactions