In this guide, we'll review all essential information about one of the most important features - interactions.

What are interactions? Interactions can be defined as the functionality of creating a 'clickable' or 'interactive' component. This is the flow your project will follow!

Interaction from a certain component can lead to a specific screen while browsing through a Uizard prototype in 'Preview mode'. This will connect your screens.
​
Multiple interactions created within a project, most commonly, are used to build a fully interactive website or app prototype 🚀

1) Select the component you want to be linked to another screen in 'Preview mode'.

2) Create the interaction by clicking on the lightning icon next to the component selected and dragging the blue arrow to the screen the component in question it should be linked to:
​

1) Select the component you want to be linked to an external website.

2) Click 'Interact' within the right-hand menu:
​

3) Under the 'Interaction' section, click the drop-down menu and select 'Open link':

4) Lastly, type in the link of the page you want to link externally:

An interactive project allows users to navigate from one screen to another while they are in 'Preview mode'. To set up an interactive project, proceed as follows:
​
1) Map your components to other screens by creating the interactions needed.

2) Enter your project's 'Preview mode' and try navigating within your project by clicking interactive (or clickable) components:

1) Select the interactive component you want to change the destination of.
​
2) Click on the 'Interact' menu on the right-hand size and choose your desired destination screen under the 'Interaction' section:
​

1) Select the interactive component and click on the 'Interact' button on the right-hand menu.
​
2) Find the transition animation and its duration settings on the right-hand menu under the 'Interaction' sections:

1) Enter the 'Interact' mode by clicking 'Interact' on the right-hand menu:

2) Select the interaction in question (with a left-click of your mouse) and click ‘Delete’ or 'Backspace' on your keyboard. Additionally, you can change the destination to 'None' to delete an interaction:

To show or hide interaction lines, follow these steps:

1) Click on 'Interact' on the right-hand menu:

2) Click the 'Show all interaction' toggle to turn it on or off depending on your needs: