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 and create an interaction linking to any screen.

2) Click the "..." button on the in-line toolbar or click the design button on the right-hand menu:

3) Choose 'Open link' option under 'Type' section on the right-hand menu:
​

4) Under the 'URL' section, enter the URL to the external website you'd like to link the component to:

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 and click on the interaction's blue arrow.
​
2) Choose your desired destination screen on the right-hand menu under the 'Destination screen' section:
​

1) Select the interactive component and click on the interaction's blue arrow.
​
2) Find the transition animation and its duration settings on the right-hand menu under the 'Animation' and 'Duration' 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:

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: