How To … Work With Screenflows

Screenflows are a great way to visualize the structure of your prototype. Screenflows allow you to create maps of multiple pages in order to demonstrate navigation paths, site maps or workflows. They can also facilitate the creation and organization of your prototype as they allow you to focus on specific use cases and quickly see how pages relate to each other. So here is how it goes …


Step 1: Create a screenflow

Simply put, a screenflow is a selection of pages of your prototype, i.e. a subset of all available pages. You can manage and create screenflows from the Prototype View. To create a new screenflow, click on the “New” button.

Create a screenflow within the Prototype View

Creating a new screenflow from the Prototype View


Step 2: Edit the screenflow

In order to edit the screenflow, double-click on it. This will direct you to the Screenflow View where you can add, arrange and link pages. To add a page, simply drag it from the My Pages panel on the left and drop it into the editing panel in the middle. You can arrange pages by simply moving them with your mouse. To remove a page from the screenflow, use the “Hide page” button in the Context Menu.

Add all previously not used paged to your screenflow

Add all previously not used paged to your screenflow

Hint: If you want to use all the pages of your prototype, click on “Add all unused pages”. Each page can only be used once per screenflow. Pages you have already included are greyed out.


Step 3: Link pages and create maps

Screenflows are a convenient way to link the pages of your prototype. To do so, select a page and all linkable elements will be highlighted (Note: elements that may contain multiple link targets must be linked directly in the Page View). Now drag any highlighted element onto the desired target page to create a new link. Use the “Remove link target” button to break unwanted links. Yes, it’s that simple.

In order to create a map that shows connections between pages, you can choose to display relevant links in the screenflow. To do so, select a page and you will see all existing links as little grey arrows going to and from the page. Use the “Show arrow” and “Hide arrow” buttons to pick which links should be visible in the map.

Show linked pages within the Screenflow View

Screenflow showing a map of linked pages

Hint: Double-click any page in the screenflow to edit it.

That’s it! You have successfully created and edited a screenflow!


Do you need help creating screenflows? Just send us a message via or FacebookTwitter or Google+.

Happy Prototyping!

Speak up! Let us know what you think.