How to add page navigation using interactions?

Adding a Page navigation interaction can help in making simple clickable wireframes/prototypes helping in rapid prototyping.


In this article, we will outline the steps to add page navigation through interactions.


To demonstrate page navigation using MockFlow's Prototyping feature, we created two pages—a Home Screen and a Chat Screen—for a Mobile Messenger Application.


Screen Shot 2024-12-09 at 2.46.02 PM.png


1In the wireframing editor, select a component from your design and click on the 'Manage Interactions' option in the Prototyping section.


Screen Shot 2024-08-29 at 5.51.59 PM.png


2You’ll see three interaction options; select an interaction type and add an action to the component.


Screen Shot 2024-08-29 at 5.47.53 PM.png


3Choose the 'Go to Page' action from the list of options.


Screen Shot 2024-08-29 at 5.52.20 PM.png


4Select the desired page for the interaction and click Select.


Screen Shot 2024-12-09 at 3.18.53 PM.png


4The chosen action will be added to the interactions. Click on 'View' to see it in action.


Screen Shot 2024-12-09 at 3.19.17 PM.png


6Clicking on the component will display the interactions between pages by linking.


Page navigation gif.gif












Rate this article
great ok bad
For more questions - Contact Us
...