Play is a tool for designers to create native iOS experiences, but it’s also a great tool for designers to pass their designs to developers. We have several ways to aid in this handoff, one of which is code export.

Play’s code export is written in SwiftUI. Because Play lets you design structurally, use native elements and gestures, and customize SwiftUI properties, turning your visual designs into code is seamless.

Code export is available on Play for macOS and can be found in the Code Panel on the left side of the screen. The code will refresh to reflect the current selection. If nothing is selected, the Code Panel will be empty.

Some teams copy Play's code directly into their projects in Xcode, while others use Play’s code as a reference point.

Copy the entire code block by clicking the copy icon in the Code Panel.

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

Customize your code using the code settings, which you can view by clicking on the second icon in the Code Panel. You can turn on boilerplate code, show line numbers, and use styles in your code.