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.
Anatomy of an Interaction
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!
Creating an Interaction
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:
Double click or drag a trigger/prefab from the Interactions Panel.
Click the purple + icon on the object to bring up the Quick Add Menu.
Press "A" on the keyboard to bring up the Quick Add Menu.
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.
Managing an Interaction
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:
D: to disable the selected node
CMD + D: to duplicate the selected node
Delete: to delete the selected node
A: to open the quick add menu
Enter: to toggle collapse the selected node and all nodes attached (you can also double-click on the node's body)
M: to toggle collapse only the selected node
C: to toggle collapse only the attached nodes
CMD + R: to rename the node( or double-click on the node's title)
Testing an Interaction
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.
Advanced Prototyping
Expression Editor
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.
Variables
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.
Conditions
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.
Animate and Delay Blocks
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
Loop
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.
Component Interactions
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.