Storyboard

The Storyboard view allows you to visualize the overall design and navigation of your app. On Storyboard, you can see different screens and user interactions that make up your app. This allows you to see how users will navigate through your app and ensure that the user experience is as intuitive and user-friendly as possible.

Storyboards can also help you identify and resolve potential navigation issues or dead-ends. This saves time and resources that would otherwise be spent on fixing issues later on.

Our Beta release of Storyboarding is optimized for projects with 30 or fewer pages.

Storyboard

Storyboard legend

In a storyboard, a legend is a visual key or guide that explains the meaning of the different lines, icons, and colors used inside the canvas.

We use the following elements inside the storyboard:

Storyboard legend
Storyboard legend
  1. The solid line is used to represent the Navigate or Login action.

  2. The dotted line is used to represent the Bottom Sheet action.

  3. The right arrow icon is used to represent the hidden widgets.

Highlight routes on a page

With so many pages displayed on a Storyboard, it may be difficult to identify what routes are coming and where they go from a specific page, especially when lines overlap each other. To highlight the incoming and outgoing routes on a specific page, just click on a page, and the routes will be highlighted in blue color.

Highlight routes on a page
Highlight routes on a page

Move pages

You might want to adjust the default arrangements of pages on canvas and group the pages that belong to the same feature. To do so, select the page and drag it to the desired place.

Move pages

Open a page from Storyboard

You can also open a page directly from a Storyboard. To do so, simply double-click on a page.

Open a page from Storyboard
Open a page from Storyboard

Video guide

If you prefer watching a video tutorial, here's the one for you:


Last Updated Date: September 4, 2023

Last updated