Managing Interactions

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.

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.

Keyboard Trigger

When creating artboard-to-artboard transitions, you will see the Keyboard trigger in the Trigger drop-down list. The keyboard trigger makes it possible to create Studio prototypes for devices that aren’t controlled by a mouse or touch screen. By mapping each interaction to a specific key, including keys on a remote or video game controller, the keyboard trigger lets you create prototypes for all kinds of devices.

Setting a keyboard trigger

To set a keyboard trigger on your transition, follow 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 to which you want to transition.
4. Click the Trigger drop-down menu, and then click the keyboard icon ().
5. In the Key field, enter the key you want to set as the trigger. Or leave the default key (S), if you prefer.

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 or appearance settings in Preview mode

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

To change the device type while in Preview mode:

1. In the top-right corner of the Preview window, click the settings icon ().
2. In the modal that opens, click the Viewport drop-down, hover over a device type, and click the specific model you want to use.
   If your prototype requires a custom viewport, click the number fields to the right of the Viewport drop-down and enter the appropriate dimensions.

To change the viewport appearance while in Preview mode:

1. In the top-right corner of the Preview window, click the settings icon ().
2. In the modal that opens, click the Appearance drop-down, and click Device, Shadow, Border, or None.

To change the viewport background color while in Preview mode:

1. In the top-right corner of the Preview window, click the settings icon ().
2. In the modal that opens, click the color rectangle to the right of the Appearance drop-down.
3. In the color modal, select the color you want to use.
   Note: You can adjust the color by dragging the scrubber or by entering the color code in the RGB, HSL, or HEX field.

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

To change the device in Preview mode in Studio, you need to click the cogwheel on the top right corner of the Preview window. The background color is also changed via this cogwheel. 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.

Deleting an interaction

To delete an interaction, hold Control while clicking an interaction in the inspector. Then, click Delete.