Screens

Your project is composed of screens. Each screen corresponds to a step in the user journey. Find out how to edit a screen, create a screen change action and add animations and transitions.

Edit screen

When you create a new project, a screen is automatically created.
You can find all the screens in your project in the Screens window on the left of your workspace.

You can add any type of content to your screen. All the objects you have inserted in your screen are displayed in the Objects window at the bottom left.

There is no limit in terms of the number of screens for your project.

⚠️ Be careful not to confuse screen and state: a screen is a page, while a state is a particular layout of that page. States are mainly used to create animations with transitions.

Create new screen

To add a new screen, click on the + ADD SCREEN button. If you select the state, this button becomes + ADD STATE ... to add a new state.

You can also duplicate an existing screen.
Each new screen automatically includes one state.

💡 Tip: The number next the screen's name indicate the number of state in this screen. You can click on the screen's name to change it (on state's name too) - very useful to find your way in your project.

Create a change of screen

By default, screens are independent and they are not linked. 
You can create the actions to go from one screen to another according to your user workflow. You can also activate the Magazine mode which automatically swipes horizontally from screen to screen (mainly for digital publishing projects).
To create a screen switch button, select the button. Click on Actions and + ADD ACTION.  Choose the trigger (e.g. Tap/Click) and the Change Screen action. 
You have several options: 
  • Go to selected screen: select a screen from all the screens in your application. You can specify a status of this screen and add a delay. 
  • Go to the previous / next screen: the notion of "previous" and "next" depends on the position of the screens in the list. You can add a delay, an interval (for example, go from 2 to 2) or activate the loop mode.

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

Rename Screen

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

Animate screen

At the screen change, there is no transition: all objects reload at the display and a white screen may appear. If you want to add a transition, you can use the foreground/background or create states. 

Create a state

To create a new state, select the current state and click on the + Add state button to create a blank state (without transition) or on the orange button to create a linked state.

Still need help? Contact Us Contact Us