Interactions are how you prototype and add motion to your design. In Play for macOS, you’ll enter Interaction Mode to add interactions to your objects.

Please note: you cannot add interactions in Play for iOS yet. You can only edit your design and test your interactions on iOS.

Interactions in Play start with a trigger, which is the event that causes an interaction to fire. Most triggers have trigger properties that allow you to further customize the behavior that the trigger will listen for.

On a trigger, you'll add an action, which will affect the look, feel, or behavior of your prototype. When a trigger fires, the action(s) on that trigger will occur.

Play also offers prefabs, which are pre-fabricated, ready-made interactions that the Play Team has created for you to drag and drop into your projects, making prototyping common interactions much more efficient.

With our triggers, actions, and prefabs, there are over 1000 different combinations, giving you the flexibility to create dynamic interactions to make your design interactive and unique!

To create an interaction, you'll first want enter Interaction Mode using the segmented control at the bottom center of the Play editor (or pressing 3 on your keyboard).

You'll then select the object to place the interaction.

Next, add a trigger:

Then add one or more actions (or other interaction nodes) the same way you added a trigger.

Finally, test your interaction in Play Mode on your iOS device.

You can manage any aspect of your interaction by right-clicking on an interaction node. Here, you can duplicate, rename, disable, and minimize a node, along with other options.

You can also manage interaction nodes using the following shortcuts:

Test your interaction on your iPhone through Play Mode. Tap the "Connect to macOS" button in your iOS app that appears when you have a project open on macOS.

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 don't have your iOS device handy, and you're on macOS 15, you can use the Apple simulator.

Play’s Expression Editor is an input method that allows for advanced functionality. It can be accessed by clicking the + sign button on any property of any interaction node and when opened, will resemble a code editor.

When you write an equation in the Expression Editor, you’ll receive an output. That output might be a number, string, or boolean (true or false). The output will be the value of whatever property was edited.

Read more about the Expression Editor

A variable can be a number, string, or boolean. All variables have an initial value that you’ll create in the left side Variables Panel, but that value can be changed through user interaction, making variables very useful for prototyping.

A Set Variable action lets you hard-code a variable’s value (like “Hello”, 20, or True) or use properties and equations to set the variable’s value responsively.

Once a variable is set, it can be used in subsequent actions, either as part of an equation or as an output to the user.

Read more about Variables

Conditions are the primary way to use logic in Play. They let you use a trigger to fire different actions in different circumstances using an If statement. If the If statement is true, the ‘If’ actions fire, but if the If statement is false, the ‘Else’ actions fire.

You can create simple conditions or complex, nested conditions that heavily rely on Expression Editor functionality.

Read more about Conditions

The Animate block applies animation settings to multiple actions at once, allowing you to more easily choreograph multi-action interactions.

Animate blocks have two parts, Animate and On Complete, that can each have their own set of actions. Any actions connected to the ‘Animate’ block will animate according to the settings in that Animate block. Actions connected to the ‘On Complete’ section will fire immediately when the animation is finished.

You’ll recognize the Animate block’s properties from actions in Interactions 1.0: Delay, Duration, and Easing. These properties still exist on some actions if their Animate switch is turned on. Any animation settings on an action will override the setting in the animation block.

A Delay block delays any actions attached to it. You’ll simply set the delay time in seconds using either a number or the Expression Editor. Like Animate blocks, Delay blocks can help choreograph multi-action interactions

Read more about the Animate and Delay blocks

Loop in Play allows you to apply one action multiple times. We have two types of Loop: Loop Children and Loop. Loop Children lets you target each of a selected container’s children using a single action. Loop loops through a range of values that can be used in an action.

If you’re familiar with For Loops in code, Play’s Loops should be intuitive.

Read more about Loop

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.