Interaction Mode

​

Overview

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.

​

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 4 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.

​

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, use Play’s Simulator!

​

Lock Selection

To keep the same view displayed on iOS Play Mode, rather than changing the view based on the selection on macOS, you can lock the selection. In an object’s context bar in Design Mode, just Pin the Selection.

​

Annotating Interactions

Interactions in Play allow you to get pretty specific, but we know users still want to annotate sometimes. Whether you’re communicating with a teammate or leaving yourself a reminder, you can add comments to interaction nodes in Play. Right-click on an interaction node and select “Add Comment.” This comment will follow the interaction node if it is moved or duplicated.

​

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, boolean, array, etc. 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. 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

Loops in Play allow you to apply one action multiple times. You can loop through an object’s children, an array, or a range of values. 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.