Intro to Play

​

Setting up Play

To get started, make sure to download both the macOS and iOS/iPadOS apps. The iOS and iPadOS apps let you view and interact with your designs in their native environments, your phone and your iPad. While most users design from the macOS app, you can also design UI directly from your phone using the iOS app! To view and interact with your prototypes on iOS/iPad, have both the macOS and iOS/iPad apps open and tap the green ‘Connect to macOS’ button on the iOS/iPad app. This will sync your devices, so anything you select on macOS will be displayed on iOS/iPad, where you can interact with it to test each new edit. You can also interact with your prototypes without using the iOS or iPadOS app with our macOS Simulator. To launch the Simulator, click the green play button and launch a new Simulator window.

​

Design with Play

In Play, you can design from scratch, use native elements, import from Figma, or start with some templates from the Learn section in macOS. With the exception of the pen tool for shapes, you can design anything in Play that you can in Figma. Elements in Play are structured with auto layout, and their element properties, layout, position, and appearance can be customized when selected. You can even turn these elements or groups of elements into reusable components across your project.

​

Prototype with Play

Prototyping is how you add interactivity and motion to your designs in Play. Prototyping is done in Interaction Mode, and interactions consist of a trigger input (like a tap, scroll, or phone shake) and an action response (like scaling an object, navigating to a new page, changing a component’s state, or loading data). You can create more advanced interactions by using logic with conditions, passing data with variables, and applying actions repeatedly with loops and timers. You can also use our pre-made interactions, called prefabs, to add advanced interactions in seconds.

​

Learn the basics

​

Explore more advanced concepts

​

Share & Ship with Play

Once you’ve finished designing, you can share your prototype to anyone with an iPhone using an App Clip. They don’t need to download any app or create an account to view the prototype. They’ll feel like they’re interacting with a live app because Play App Clips are rendered using the same technology as a production app. Once you’ve shared and tested your prototype, you can save your developers time by exporting the front end of your prototype directly to Xcode using Play’s SDK. This export is a package that includes pages, components, variables, assets, and styles, not written SwiftUI code. If you need SwiftUI code for reference, you can check out the code panel. Once you’ve exported the Play SDK, you can connect a backend to finish your iOS app, then publish it to TestFlight and the App Store.

​

Resources and Support

As you use Play, you can always reach out to us for support. Enjoy!