Description

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

By skimming through this guide, you'll learn what exactly are interactions and how to create an interactive project by leveraging them. Additionally, you'll be able to discover all extensive functionalities related to interactions' creation & management 🚀


Content


What are interactions?

Interactions can be defined as the functionality of creating a 'clickable' or 'interactive' component.

Interaction from a certain component can lead either to a specific screen of your project or an external website. It's important to note that the interactions created can be tested out simply by entering the 'Preview mode' and clicking components, which are set to be interactive (or clickable).

Multiple interactions created within a project, most commonly, are used in order to create a fully interactive website or app prototype 🚀


How do I link components to other screens?

1) Select the component you want to be linked to another screen;


2) Create the interaction by:

A) Clicking on the lightning icon next to the component selected and dragging the blue arrow to the screen the component in question should be linked to:


B) Selecting the interaction's type and destination screen on the right-hand menu:


How do I link components to external websites?

⚠️ This functionality is available only with a Pro subscription ⚠️

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

2) Choose 'Open link' under 'Type' on the right-hand menu:

interaction-external-website

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


How do I create an interactive project?

An interactive project allows users to navigate from one screen to another whilst you are on a 'Preview mode'. To set up an interactive project, proceed as follows:

1) Map your components to other screens by creating interactions needed;

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


How do I easily change the interaction's destination?

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):

3) Choose your desired destination screen on the right-hand menu under the 'Destination screen' section:


How do I change the transition animation and duration of my interactions?

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):

3) Find the transition animation and its duration settings on the right-hand menu under the 'Animation' and 'Duration' sections:


How do I delete an interaction in my project?

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):

3) Click ‘Delete’ or 'Backspace' on your keyboard:


Related articles

Did this answer your question?