The Complete Design Workflow
A end-to-end walkthrough of how a real product team uses WireFlow — from brief to approved handoff.
Overview
WireFlow is designed around a structured lifecycle: Plan → Design → Review → Handoff. Each phase has dedicated tooling so nothing falls through the cracks and every team member knows exactly what they're responsible for.
Plan
Define flows and screens up front. The Plan panel tracks completion gates: wireframe done, review approved, content finalised.
Design
Build wireframes on the canvas. Use AI to accelerate screen generation and real-time collab to co-design with your team.
Review
Share a review link. Stakeholders comment directly on the prototype. Decisions are tracked against each screen.
Handoff
Export to Figma, React Native, or Android Compose. Developers get annotated specs, not just static images.
Phase 1 — Planning
Before touching the canvas, the UX lead opens the Plan panel (left rail → checklist icon). Here you define every flow and screen the project requires. Each item has three completion gates:
Wireframe created
The screen exists on the canvas and has at least the key elements placed.
Stakeholder approved
A review has been submitted and all open comments resolved.
Content finalised
A content writer has reviewed copy and marked it done (or been assigned via the review workflow).
The Plan panel shows a progress bar across all gates so everyone can see overall project health at a glance.
Phase 2 — Design
With the plan locked, designers work through the screen list top-to-bottom. The canvas supports:
- Multi-page projects — add unlimited pages and organise them into named flows.
- Live collaboration — see team-mates' cursors in real time; changes sync via WebSocket.
- AI assist — describe a screen in plain English; the AI proposes elements which you can accept or discard as a single undo step.
- Canva import — pull designs or image assets directly from your Canva library without leaving the builder.
Phase 3 — Stakeholder review
Click Share → Create review in the top bar. Set an optional deadline and assign reviewers by email. Reviewers receive a link — no sign-in required — and can:
- Navigate the fully interactive prototype
- Leave timestamped, page-scoped comments
- Approve or request changes
The builder surfaces open review decisions as coloured pills on each page thumbnail so you can triage at a glance. Once all decisions are resolved, mark the review Closed and the Plan gate ticks automatically.
Phase 4 — Handoff & export
When all Plan gates are green, click Export in the top bar:
Figma
Install the WireFlow Figma plugin, enter your project ID, and import selected pages as Figma frames. See Figma Integration for the full guide.
React Native
Download a ready-to-run RN project with typed components for each page. See Exporting to React Native.
Android Compose
Download a Compose project with Scaffold screens for each wireframe page. See Exporting to Android.