Skip to main content
Creating an interactive project

Employ an interactive experience to help other people to understand your project's vision better

Updated over 6 months ago

About interactions

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 ๐Ÿš€


Linking components to other screens

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:
โ€‹


Linking components to external sites

โš ๏ธ This functionality is available only with a Pro subscription โš ๏ธ

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:


Creating an interactive project

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:


Changing the interaction destination

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:
โ€‹


Changing the transition animation

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:


Deleting an interaction

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:


Showing/hiding interaction lines

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:


FAQs

Is there a 'Jump To' interaction or a way to have interactions on one screen?

There isn't an option to have interactions on the same page at this time.

Is there a swipe functionality?

At this time, there is no swipe functionality, but we are always looking for ways to improve!

Is there an animation where it will slowly zoom out of images?

There isn't a slow zoom-out feature for images at this time.

Is there a hover feature for buttons or objects?

There isn't a hover function at this time for any components.

Is there a mouseover feature?

Unfortunately, there isn't an option at this time to create a mouseover function for your components.

Did this answer your question?