Play is a tool for designers to create native iOS experiences, but it’s also a tool for better designer-developer collaboration. We offer several different ways for developers to get a head start from Play.

In the code panel, you can find Play to Xcode (Play SDK) implementation code, SwiftUI code for the layout or interaction nodes, property values for elements, triggers, and action, and a full selection hierarchy. Our code resources were natively written from the ground up.

Because Play lets you design structurally, use native elements and gestures, and customize SwiftUI properties, translating your designs into code resources is seamless.

The Play SDK tab generates the implementation for the selection in Xcode. In Xcode, this code will call the page or component. The boilerplate code never changes, only the page or component name.

This implementation code will not work unless you have published the Play SDK package and exported it to an Xcode project. There is a button on the Play SDK tab that will deep link to the selected object's implementation code, and you can re-export from there. You can also use the Publish button.

The SwiftUI tab generates SwiftUI code for the selection. It's best used as a reference point for discovering how the design should be laid out in SwiftUI, but you can also copy parts directly into your code base.

If you're in Design Mode, the SwiftUI code will layout the view. At the moment, we only display the code for for the selected object, not it's children. To build a full view, copy the parent into Xcode, then paste each child into the hierarchy.

You can copy each line individually by clicking on it, or you can copy the full code using the copy button. When the full page is selected, hovering over/clicking the copy button will also copy all necessary boilerplate code.

The SwiftUI tab has two properties that affect how code is displayed:

Our goal is to 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. With Design Mode code, your interactions will not be brought into Xcode.

If you're in Interaction Mode, the SwiftUI code will only contain the interactions. Your UI design from Play will NOT be brought over. Instead, the Xcode simulator will display a placeholder object, usually a simple rectangle.

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.

When you trigger the interaction 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.

The Properties tab generates the properties for the selection.

If you're in Design Mode, the properties will include Element Settings properties like Alignment, Spacing, and Width/Height. These properties are written in correct SwiftUI syntax, and you can copy the value by clicking on it. We also include the full property context underneath, like the types and value placeholders.

This is useful to developers because the SwiftUI syntax and Play nomenclature might vary slight. For example, "Fill" width in Play is ".infinity" in SwiftUI. Play's code translates this value and makes it easy for developers to copy values from the design in Play and add to their code base.

If you're in Interaction Mode, the properties will include the trigger and action properties for the specific trigger(s) and action(s).

These values makes it easy for developers to copy from Play and add to their code for animations.

The Hierarchy tab generates the hierarchy for the selection. It's kind of like the developers version of a Layers Panel, and it includes things that are necessary in SwiftUI, but not 1:1 with Play, like Nav View, Geometry Reader, and Scroll Viewer.

Only objects (ie. stacks, text, images, etc.) are shown in this simple view, allowing developers to see the structure of the design in a skimmable, modular way, so they can visualize the structure in SwiftUI.