Interactions are how you prototype and add motion to your design. In Play for iOS, you can add interactions to an object in the Interaction Panel and test those interactions in Play Mode. In Play for macOS, you’ll enter Interaction Mode to add interactions to your objects.

Interactions in Play have two parts: a trigger and an action. Think of it like a cause and effect. The trigger is the cause and the action is the effect. When the trigger fires, the action will occur.

Play offers over 700 different combinations of actions and triggers giving you the flexibility to create dynamic interactions to make your design interactive and unique!

For example, you might want a button to take a user to a different page in your project when pressed. To design this interaction, you would assign your button a Tap trigger and a Go To Page action. Or, perhaps you want a CTA to pop up from the bottom as you scroll through your page. For this interaction, you would add a Scrolled To trigger with a Set Position Y action. You can further customize your interaction using trigger and action settings.

Triggers will only respond to events that occur on the object that owns the interaction.

A trigger’s settings allow you to be more specific about what type of event should trigger the interaction. For example, Pan triggers allow you to specify the Pan Direction, and the interaction will only be triggered by a pan in the direction you chose.

An action’s settings allow you to better describe the interaction’s outcome. For example, Set Rotation actions allow you to specify the exact degree value that an object will rotate when a trigger fires. Action settings also include customization for the interaction’s animation.

To adjust an action’s settings, tap the action’s name and a sub-panel will appear. Every action has different settings.

For actions that affect an object, you’ll use the Target property to select the object that should be affected. Tap on the right side of the property to select an object using the Layers Panel. The (Self) target refers to the object that produced the interaction, such as the button that was tapped. Any object that is not applicable will be grayed out.

Multiple interactions can affect the same object.

Test your interaction on your iPhone through Play Mode. You can either scan the QR code on the connection popup in your macOS app, or tap the "Connect to macOS" button in your iOS app.

When connected, the iOS app will display your selection on macOS, ready for you to interact with it.

Making changes to an interaction will update it automatically on your phone, so you can test the change in real time. To reset an interaction without making any changes, double tap the screen with two fingers.

If you add an interaction to a Main Component, that interaction will be available on every instance of the component. In the instance’s Interactions Panel, these interactions will be at the bottom, under the name of the component.

You cannot modify or delete main interactions at the instance level, but you can disable them by tapping the eye icon. To modify or delete main interactions, go to the Main Component.

You can add additional interactions to any component instance.