View prototypes with flow mode
  • 30 Jan 2023
  • 1 Minute to read
  • Dark
    Light

View prototypes with flow mode

  • Dark
    Light

Article Summary

Flow mode showcases all the screens of a prototype in a tree view that shows the links between screens. Flow mode helps designers visualize the flow of their screens, identify un-linked screens, and assess the accessibility of screens. You can use flow mode in the Console and the Share experience.

Enter flow mode

To enter flow mode from the Console, click Flow Mode.

To enter flow mode from the Share experience, click Flow.

Use the tree view

The tree view displays two panes. The main pane on the left shows the flow of screens. The prototype screen you entered flow mode from is highlighted by a red box.

tree view of screens

The secondary pane on the right shows all the hotspots on screen selected in the main pane. You can click the hotspots to jump to that screen in the main pane.

Prototypes often link back to earlier screens. When you reach the final screen in a branch, you'll see a note about the number of circular references. A circular reference means the screen links to screens that appear elsewhere in the tree view. Visualizing these circular references would result in a cluttered view. You can use Re-flow from screen to get an idea of these references. Re-flowing places the chosen screen as the first screen in the tree.

Jump to a screen

To jump to a certain screen, in the breadcrumbs, click the current screen name and choose a screen from the dropdown.


Was this article helpful?