Play is a tool for designers to create native iOS experiences, but it’s also a great To help designers pass their work off to engineers, we offer separate SwiftUI code export for layout and interactions. We also offer the ability to export your styles, assets, components, full pages, and variables directly to Xcode using Play’s SDK. You can learn more about that here.

The SwiftUI code export option is for those that want to look at the code that is being generated for both layout and interactions. Because Play lets you design structurally, use native elements and gestures, and customize SwiftUI properties, turning your designs and/or interactions into code is seamless.

However you decide to use Play’s exported code, it’s an excellent reference point for developers.

Code can be exported from the Code Panel on macOS. Layout code populates the Code Panel in Design Mode, and Interaction code populates it in Interaction Mode.

The Code Panel displays code for the current selection—either the object or interaction node. The code will refresh when another object or node is selected. If nothing is selected, the Code Panel will be empty.

To copy the entire code block, click the copy icon.

You can also copy specific blocks of the code by clicking on the desired code block. If the code block is more than one line, it will highlight gray when you hover over it.

To customize your code using the code settings, click the edit icon. You can turn on boilerplate code, show line numbers, and/or use styles in your code.

With your code copied to your clipboard, open a project in Xcode and paste the code into the appropriate place. If you’ve copied the entire code block, we recommend starting with a blank scene because Play’s exported code includes the file preamble.

Play will generate SwiftUI code for the layout based on your designs in Play. Our goal is to exactly match your design 1:1. You’ll see the best results when you use Play’s best practices for laying out your pages and objects.

Because you’ve only copied the laid out views, your interactions will not be brought into Xcode.

Your developers can also simply inspect the layout code as a reference.

When you paste the copied interaction code into a project in Xcode, your UI design from Play will NOT be brought over. Instead, the Xcode simulator will display a placeholder object, usually a simple rectangle.

When you trigger the action in the Xcode simulator, the exact interaction you exported from Play will occur, applied to the placeholder object. No matter how simple or how complex, our interaction code will compile accurately and run seamlessly.

We use a placeholder object so an engineer can apply the interaction code to any object or design in an Xcode project. This allows engineers to use the interaction code for multiple objects since it isn’t tied to just one.

It also allows engineers to inspect the code as a reference, without being distracted by specific UI elements.