Guide
Draw the navigation flow
In the Flow tab you draw how people get from one screen to another, with screens, conditions, notes and arrows, or you ask the AI to draw it from your screens.
Who can do this
- For
- Designers, Your team
- Role
- “Can run with AI” and up
- Plan
- All plans, including Free
- Where
- On a computer
The Flow is the map of the project: which screen leads to which, where the journey branches and what happens in each case. It helps the AI build the screens that are missing and, if you share it, your client sees it in their portal.
Open it
In the project, click the Flow tab, next to Screens. Press Esc to go back to Screens.
Get started fast
With an empty map you have two shortcuts:
- Ask the AI: creates a note so the AI draws the full journey from your screens and their hotspots. With your API key it runs right away; with the connector, you ask your chat for it. The map appears on its own when it finishes, designed to be read at a glance: a note at the top, the journey in numbered lanes from left to right, global navigation as a dotted line and text on the important arrows.
- Seed screens: adds a node for every screen that is not there yet, already linked by their hotspots. What was already there is not touched.
Add pieces
The bar at the bottom left has four pieces. Click them or drag them onto the map:
| Piece | What it is for |
|---|---|
| Screen | A screen of the project: you pick which one from the list. The ones already there say "already in the diagram" |
| Condition | A point where the journey branches, with its Yes and No options. Use + to add more cases |
| Note | Text that explains something about the journey |
| Image | A reference: pick it or paste it with Ctrl+V (PNG, JPEG, WebP or GIF, up to 8 MB) |
Double-click a piece to change its text. On a screen, double-clicking opens it in Screens.
Link with arrows
- Drag from the edge of a piece, which lights up, to another one.
- Or click Connect (C) on the left rail: click the origin and click the destination.
- On a condition, drag from each option: the arrow carries its name.
- If you drop on empty space, a new piece appears, already linked.
Lines come out in a zigzag and go around the pieces, never behind them. The ones that leave Yes are green and the ones from No, red; a line's label takes the same color.
When you select an arrow, its bar shows up: the ends, whether it is angled, curved or straight, the stroke, the width, the color and Write on the line to give it a label.
Arrange the map
- Select with a marquee (S) picks several pieces at once; so do Shift and click, or Ctrl+A.
- When you hover over a piece you can change its color and its width.
- With a right-click: See in Screens, Lock so it does not move, and the layer order.
- An arrow can also be locked from its bar. To unlock it, click it and choose the open padlock.
- View as switches between Cards and Screens, with the capture of each one.
- Delete deletes what you selected, Ctrl+Z undoes and F fits everything in view.
Change the map by dictating
With the Flow tab open, what you write in a note starts with the map: the AI changes the Flow first and then the screens. Those notes carry the Flow chip.
When a batch changes how the screens navigate, the AI also brings the map up to date. If it was approved, it needs approval again, and with Which map to see you compare the Current one with the Approved one.
What your client sees
In Delivery › Options, turn on Flow and your client sees the map of that update in their portal, read only, and opens each screen from it.
Screens that do not exist yet
When the AI draws the journey, it can include screens it has not built yet. They show up as No screen yet with their name: those are the ones it will build when you ask it to. See Approve the flow map.
