Overview
Play offers two ways to integrate your designs and prototypes into your development workflow:
Play to Xcode (Play's SDK): Allows you to move your project from Play to Xcode without writing additional code, exporting everything you've created as a complete Swift package.
SwiftUI Code Panel: Provides SwiftUI code, properties, and hierarchy as a reference guide for developers familiar with Xcode and SwiftUI code.
It’s important to note: Play is not a complete “no-code tool.” For BOTH methods, if you’re planning to publish your app to the App Store, there are several steps Play does not handle for you. On your own, you’ll need to:
Create an Apple Developer account.
Download and familiarize yourself with the basics of Xcode.
Submit your app to the App Store yourself, per Apple's restrictions on 3rd parties publishing to the App Store.
For App Store submission guidance, please refer to Apple's official documentation.
Want to see how Play to Xcode works before upgrading? Check out our sample Xcode project, watch our implementation video, or read our implementation documentation.
Play to Xcode: Complete Integration
Play to Xcode takes everything you've created in Play—pages and components (including interactions), assets, styles, and variables—and exports them as a Swift package that can be directly integrated into your Xcode project.
Export your project to Xcode from the Publish button in the top right corner.
Benefits
1:1 Design & Interaction Fidelity: Everything you create in Play appears exactly the same when imported into Xcode.
Complete Access: Direct access in Xcode to any style, component, full page, or entire app made in Play.
Extensibility: If you know how to code, you can build additional pages and functionality in Xcode by leveraging the components and styles from Play.
Dynamic Content: Easily pull in external data to update text, images, and other elements in your components
Variable Support: Use variables defined in Play for expanded functionality and to trigger other events from Xcode.
API Integration: Use the Fetch action in Play to GET and POST data or call APIs, making it possible to integrate services like Supabase.
Use Play to Xcode when you want to move directly from design to a functional app with minimal coding.
Swift UI Code Panel: Reference and Guidance
The Code Panel provides SwiftUI code representations of your Play designs, including layout code (work in progress) and interaction code, layout properties, interaction node properties, and object hierarchy. It serves primarily as a reference point for developers, but it can be copied into Xcode as well.
Key Features
Layout Code: View the SwiftUI code that represents your design layouts. This is still a work in progress as we’re currently rebuilding this natively.
Interaction Code: See how your interactions translate to SwiftUI code with placeholder UI.
Properties: Understand how layout and interaction properties are structured and defined.
Hierarchy: Visualize the structure of your selected objects.
Use Play’s reference code when you prefer to write your own code but want guidance on how Play prototypes translate to code. It’s helpful to be familiar with SwiftUI and Xcode when using Play’s SwiftUI code, properties, and hierarchy.
Whether you choose Play to Xcode for seamless integration or use the Code Panel as a reference for your own implementation, Play provides powerful tools to bridge the gap between design and development.
For detailed implementation guides and more information about these features, visit: