Studio enables designers to move fluidly between visual and interaction design. Any type of layer (including artboards) can have one or more interactions. If a layer has interactions, you can see the layer marked with the small lightning icon in the layer list on the left side of Studio.

Each interaction has trigger type, transition type, and one target. For more detailed transitions, you can choose motion which allows you to customize delay, duration, and curve at the individual layer level.

Note: Because the Interactions area of the inspector is identical to the interactions modal that appears in the canvas when creating a new interaction, this guide applies to both the inspector and the modal.

Creating interactions

To create connections between layers, follow these steps:

1. Select your layer.
2. Use the C shortcut, or click the lightning bolt at the top of Studio.
3. Select where you’d like to direct the interaction.
4. You’ll then be prompted to choose a trigger and a transition before clicking Save.

Triggers

A trigger is the action a user needs to perform in order to initiate the interaction. When you create connections between layers, you’ll need to select a trigger for each interaction. Excluding the timer trigger discussed below, the user will need to perform the triggers you set to preview interactions.

Trigger options

Choose one of many triggers for each interaction:

Choosing a trigger

To choose a trigger, do the following:

1. Select any layer.
2. Use the C shortcut, or click the lightning bolt at the top of Studio.
3. Select where you’d like to direct the interaction.
4. Click the Trigger dropdown menu and select your trigger. You can then move on to selecting a transition before clicking Save.

Timer Trigger

The Trigger drop-down list also includes a timer trigger type that lets you apply automated, artboard-to-artboard transitions. Rather than requiring a user interaction as the trigger, these powerful transitions begin after a specified time delay—letting you set the exact moment you want an auto-triggered transition to start.

Note that the timer trigger is not available for use with layers.

Click the Trigger drop-down to choose the timer transition type. To set the second artboard for your transition, click the Navigate To Screen drop-down. To set the delay for a timer trigger, click the Duration text field or drag the scrubber.

Setting a timer trigger

To use a timer trigger on your transition, complete these steps:

1. Select an artboard.
2. In the inspector panel, click the Interactions or + button.
3. Click the Navigate To Screen drop-down menu and choose the artboard you want to transition to.
4. Click the Trigger drop-down menu.
5. At the top-right of the list that opens, click the timer icon.
6. Use the Duration text field or scrubber to set the delay between the time the screen opens (when previewing the prototype) and the transition begins.

Transitions

A transition defines the animation effects that occur when an interaction is performed.

Transition options

Here are the transition types you can choose:

Choosing a transition

To choose a transition, complete these steps:

1. Select any layer.
2. Use the C shortcut, or click the lightning bolt at the top of Studio.
3. Select where you’d like to direct the interaction.
4. Below the trigger dropdown, you’ll see options for transitions. Once you’ve made your choice, click Save.

Previewing an interaction

Once you’ve set your interactions, you can preview them in Studio by clicking the play button at the top right of your Studio window. The play button will open a new window within Studio where you can perform the triggers and view the transitions of your interactions.

Changing devices in Preview mode

From within the Preview mode window, you can change devices to preview your interactions on a variety of devices.

To change your device in Preview mode, click the dropdown menu at the top center of the Preview window. Device options include various phone, tablet, desktop, watch, and web options as well as a resizable option.

Rotating your screen in Preview mode

To rotate your screen in Preview mode, click the ••• menu at the top right of your Preview window, then click Rotate. Alternatively, you can use the keyboard shortcut Up+Command+R.

Going back to your home screen in Preview mode

From the same ••• menu, you can go back to the initial screen of an interaction by clicking Go to Home Screen. You can also use the shortcut Command+R.

Zoom in Preview mode

Toggle between various zoom settings by clicking •••, then using the Zoom dropdown menu.

Background color in Preview mode

From the ••• menu, click Set Background Color and choose your preferred color. Once selected, the background of your Preview window will change. The selected background color that is set in preview mode will also be set as the background color in the Doc Viewer.

Editing an interaction

To edit an interaction, click on the home layer of the interaction, then use the menu in the inspector on the right to make changes to the trigger, screen, or transition.

You can also add interactions to that layer by clicking the + button next to Interactions in the inspector.