×

Basic Prototyping 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:

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. In order to preview the interactions, the user will need to perform the triggers.

Trigger options

Trigger options include:
TriggerOptions.png

 

Choosing a trigger

To choose a trigger:

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.


Transitions

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

Transition options

Transition options include:
TransitionOptions.png

 

 

Choosing a transition

To choose a transition:

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 + sign next to Interactions in the inspector.