Your First WireFlow Project
From sign-up to your first shared prototype in under 15 minutes — a complete walkthrough for new users.
What you'll learn
Create a project
Set up a project with the right device target and invite your first collaborator.
Build screens
Use the canvas to add elements, link pages, and organise screens into flows.
Preview & share
Run the interactive prototype and share a review link with stakeholders.
Gather feedback
Stakeholders leave timestamped comments directly on the prototype.
Step-by-step
Create your project
From the Dashboard click New Project. Enter a name, pick the target device (Mobile 390px, Tablet 768px, or Desktop 1440px), and choose a colour scheme. Click Create.
Open the builder
Click the project card to open the builder. You'll see the canvas in the centre, a left rail for pages/layers/plan, and a right rail for properties/assets/AI.
Add your first page
In the Pages panel (left rail) click +. Name the page "Home". Drag elements from the toolbar onto the canvas — try a Navbar and a Hero text block.
Link pages together
Select a button element, then in the right rail choose Link to page and pick your destination. Blue arrows appear on canvas showing the navigation flow.
Preview the prototype
Click the ▶ Play button in the top bar. The preview opens in a new tab. Tap through your links to verify the flow works end-to-end.
Share for review
Click Share → Copy review link. Paste it into an email or Slack. Recipients can view the prototype and leave comments without signing up.
Space and drag the canvas to pan. Use Ctrl/Cmd + scroll to zoom.Project settings
Open Settings → Project to change the device frame, update the project name, or enable password protection for the review link. You can also set the project language here, which powers the AI translation feature.
Inviting collaborators
Go to Settings → Team and enter email addresses. Choose a role: Editor (can modify canvas) or Viewer (read-only, can comment). Collaborators see each other's cursors live on the canvas.