C · SystemsIntermediate40 min read
10. Prototyping flows
Figma · 52 pages source format
Prototype to communicate — not to impress. Link login → home, error states, simple overlay. Smart animate optional.
What you'll learn
- Connections
- Interaction details
- Overlays
- Flow starting points
Happy path
Login button → navigate to home. Use dissolve or smart animate 200ms.
Do this now
Prototype login → home. Set flow start on login.
Clear?
Error path
Invalid login → error variant on input + toast or inline message.
Do this now
Add second connection for error demo on prototype.
Clear?
Share for feedback
Prototype link for stakeholders. Comments for async review.
Do this now
Generate share link. Leave one comment on your own flow noting a friction point.
Clear?