Setting up app navigation on Figma

1. In Prototype mode in Figma, hover over a starting frame or element until the connection node appears.

The dimension of the element determines the touch area to trigger the navigation, so make sure it's not too small for the fingertip.

2. Click on the connection node and drag link to the destination page.

3. Make sure you also connect the back buttons to the previous frame. In case you have a menu, link the menu items to the corresponding screen.

4. Finally, to add a home screen (the first screen the user will see when opening the app), add a new flow starting point. In case you have an intro or/and a login page, these screens will still appear before the home screen.

There must be a single prototyping flow in the app.

When do you NOT need a navigation link?

You do not need to link these page to any destination pages:

• Intro page.

• Loading page.

• Submit button in a form.

• Elements with action tags.

• Splash screen.

Bravo does not support the animations in Figma. To apply page transitions, use the transitions Bravo Tags. The slide and modal menu include their own built-in animation.