Over one year in the making, we're reintroducing Play. It’s faster, easier, and even more powerful.

Play 2.0 features variables, conditions, loops, animate & delay blocks, new triggers and actions, UI updates, stability and performance improvements, and maybe our favorite new feature—prefabs.

Prefabs make it easy to add complex interactions to your project in seconds. Search for it, drag it to your page, and it works...like magic.

There are some features in Play 2.0 that are still in public beta, but it is available for you to try today!

We're releasing Play 2.0 with a new macOS app only available through direct distribution and a new iOS app available on the App Store. Play 1.0 will still be supported and you can continue to use it for your current projects.

You can install the new macOS app here and the new iOS app here. You'll need to install both our macOS and iOS apps to get the most out of Play.

Yes. If you are a current Play user, you can sign in with the same username / password.

Not yet. In a few weeks, we'll release an update where you can import any project you started in a previous version of Play into Play 2.0. We're calling these 1.0 projects.

Right now, you can create new projects and duplicate Gallery/Template projects, so you can experience the power of Interactions 2.0.

You can still work on any 1.0 project in the previous version of Play, which is still available from the App Store.

The previous version of Play, for both macOS and iOS will still be supported. You can still use these versions to work on your current projects until we roll the import feature out in the coming weeks.

You can tell the difference between the two versions as 2.0 has our logo inverted.

Yes, if you are on a paid plan, you will still have access to paid features like multiple project, custom videos/fonts, and code export. You will also have unlimited access to new paid features in Interactions 2.0 like variables and conditions

The first thing you’ll probably notice is that the UI has changed for both Design and Interaction Mode.

Page, Design, and Interaction Modes have moved to the bottom center of the app where the Add Bar used to live.

The old Add Bar has consolidated into two icons in the top left: + to add elements and book to open the component, asset, or font libraries. Clicking on any element selects it; then clicking anywhere on the page or canvas places it.

You can also click the green + icon on any non-component container or press the ‘A’ key on your keyboard to open the quick add menu for all elements. You can search, scroll through the options, or use your arrow keys to select an object and press the enter key to add it to your page or stack.

At the bottom of the left action bar are five icons representing the five left panels: Layers, Styles, Swift Code, Variables (new! More below), and Events Panel. Clicking each will toggle the corresponding panel into view and out of view.

Below these panel icons is the help icon, which can link you to our Getting Started content, support documentation, keyboard shortcut list, and feedback/bug reporting.

The left panel options are now the same between Design and Interaction Mode. Each mode remembers the previously opened panels, so you can move between Design and Interaction Mode without reopening and reclosing panels repeatedly.

You can add a trigger to an object from the quick add menu by clicking the purple + icon on the object or pressing the ‘A’ key, same as Design Mode. You’ll add an action to a trigger the same way.

On the right side of the app, you’ll see a list of all the available interaction nodes, including prefabs, triggers, and actions, all organized by category. When an interaction node on the canvas is selected, double clicking on any interaction node in the panel will automatically add the new interaction node to the existing one in the canvas, assuming it is compatible.

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

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 prefab is a pre-fabricated, ready-made interaction that the Play Team has created for you to use in your projects. Prefabs make it easy to drag and drop interactions into your designs in seconds, making prototyping much more efficient.

Read more about Prefabs

The Timer trigger, Timer node, and Start and End Timer actions all relate to timers, tools that allow you to fire a given action repeatedly.

Timer triggers fire at a given interval continuously or for a given number of repetitions. They can automatically start when a user opens the page, or they can be started using a Start Timer action. Timer triggers can be stopped before finishing by using a Stop Timer action.

Timer nodes are similar, but they can’t fire automatically or continuously. They’ll need to be triggered by a different trigger.

Read more about Timers

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

Read all about Triggers and Actions