Purpose
To merge flow diagrams (user actions, decisions) with wireframe layouts (screen structure), ensuring clarity for both design and dev teams.
Table – Wireflow Mapping
| Flow Step ID | User Action / Decision | Wireframe ID | Screen Thumbnail (insert in Figma/Doc) | System Response | Notes / Variants |
| F1 | Click “Book Demo” | WF1 | [Wireframe – Landing Hero] | Load booking form | Show loading state |
| F2 | Fill form fields | WF2 | [Wireframe – Booking Form] | Validate input | Inline validation required |
| F3 | Submit form | WF2 | [Wireframe – Booking Form: Submit Variant] | Trigger backend API | Handle timeout/error |
| F4 | Slot available | WF3 | [Wireframe – Confirmation Screen] | Send email + calendar invite | Success message |
| F5 | Slot unavailable | WF2 | [Wireframe – Error State] | Show alternate slots | Retry path |
Usage Notes
- Always pair flow IDs (F1, F2…) with Wireframe IDs (WF1, WF2…) → avoids mismatch.
- Keep thumbnails small in document but link to full wireframe in Figma.
- Add variants inline (empty/loading/error) instead of making separate rows unless complex.
- This sheet is especially useful during handoff walkthroughs → devs see both logic + layout.