Skip to main content
All CollectionsExporting your Code
Exporting Your Design in SwiftUI Code
Exporting Your Design in SwiftUI Code
Updated over a week ago

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.

The Code Panel

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.

Copying Code

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.

Changing the Code Settings

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.

Did this answer your question?