Create Screens

Find out how to create a screen, edit a screen, change screens and add animations and transitions.

Your application is composed of screens. Most of the time a screen corresponds to a step in the user journey.

Create a screen

New project contains one screen.

To create a new screen, click on the + button. The new screen is located after the selected screen. You can drag and drop it wherever you want.

If you want to duplicate an existing screen, select the screen and open the menu, click on Duplicate.

You can create an unlimited number of screens for your application.

To rename a screen, double-click on its name in the Screens window.

Edit a screen

You can add any type of content to your screen: a text block, an image, a component etc.

All objects on the screen are displayed in the Objects window. They are only loaded when the user is on this screen. If you want your object to be persistent, add it at the foreground or project level.

Change screen

By default, your screens are independent and they are not linked.

To switch from one screen to another, add a Change screen action. Select your trigger and add a Change screen action. You have several options:

Go to selected screen: select a screen from all the screens in your application.
Previous / next screen: the notion of "previous" and "next" depends on the position of the screens in the list.

You can also activate the magazine modewhich automatically swipes horizontally from screen to screen (mainly for digital publication projects).

💡 Tip: If you want the entire screen to be clickable, we recommend that you place an Interactive zone component above your screen and create the action on this component.

Transition

When the user changes from one screen to another, there is no transition: all objects reload on display and a blank screen may appear. If you want to add a transition, you can use the foreground or create states.

Animate screen

To animate screen you must add states.

Each screen has a default state. To create a new state, click the Edit States button and the + above the list of states.

When you add a new linked state, an exact copy of the last state is added. The linked state retains all the characteristics of the reference state and a link to that other state. It is the state that allows you to make transitions and animations.

When you create a linked state and change the layout of your objects, a transition is applied and your objects are animated.

💡 The number next to the screen name indicates the number of states it contains.

If you want to make changes to only a part of your screen, use the Multi-state component.