Journeys

Summary

A journey is a set of pages and the links between them. Journey shows the whole product as page frames joined by arrows, and filters it by who uses it.

Why it matters

This is how people think about a product. "A visitor lands, signs up, buys" is a journey. Showing frames with arrows answers "how do I get here?" and "what is missing?" at a glance.

Implications

• Pages are drawn as frames, like Figma frames: a small render of the real page, with its name and route above it. They are not boxes.
• An arrow is a link with an action. The label is what the person does: "Upload Form 16", "Unlock ₹249", "After sign-in". Two pages can have several arrows, one per action.
• Built-in filters:
  • All — every page. The default.
  • Open — pages anyone can reach without signing in.
  • Sign-in — sign-in, sign-up, forgot password and reset.
  • One per role — the pages that role can reach, such as User or CA.
• Your own journeys. "+ Journey" names a set of pages, such as File taxes. It shows as a filter next to the built-in ones.
• Captured first, then edited. Capture finds pages and real links. In Edit you can add a page, draw a link and choose its action, or place a component or an icon on a page. Every change goes to the draft.
• Viewport and state apply to every frame at once. One click shows the whole product on Mobile, or every page in its Empty state.
• Problems are marked on the frame: a dead end, a page nothing links to, a missing state.
• Preview walks it. Preview opens a page in a new tab, and its links follow the journey's arrows.

Related

• 2026-10-18-editor-redesign
• capture-reads-the-product — where pages, links and roles come from.
• journey — the screen.

Sources

• The owner's instructions in the session of 2026-10-18.