As we all know, product design doesn’t end with your design file or prototype. In many ways, that’s just the first step. What matters most is how your product vision is built and put into production. Since native iOS designs will ultimately be written in UIKit and SwiftUI, we started Play wondering how we could use these foundational building blocks early in the design process.

Play is a native design tool, as opposed to a traditional vector-based drawing tool, so we have a greater ability to harness these real iOS materials. We’ve made it possible for designers to visually design with SwiftUI, and through that, Play makes it easier for engineering teams to bring designs to life. Here are five ways how:

1. Designing with Native Materials

Designing with “real materials” helps product teams create better products through a more streamlined workflow. It cuts out the back-and-forth between what design has created and what engineering needs to translate to code.

With Play, designers can tap into engineers’ world of Apple's iOS elements, materials, and controllers. These native patterns all fully functional, which means less work is required to design them. It also means less work for engineers because the native properties are 1:1 with what they’ll code.

We offer a comprehensive list of iOS elements including:

• Native Elements: Maps, Date Pickers, Swift Charts, Gauges, Sliders, Text Fields, SF Symbols

• Navigation Controllers: Tab Bar & Nav Bar.

• Materials: Progressive Blur, Haptics, Materials

2. State Manager & Inspector

When designers create components with multiple states, engineers need to create those states in code. Play’s state manager simplifies this process by allowing engineers to view each component state side by side. They can inspect the variation in properties from state to state and translate those properties into code accordingly.

3. Interaction Mode

When designers hand off their designs to engineers, those design files are often heavily annotated to describe the interaction with details like animation, timing, and easing.

Play lets designers skip the annotation because engineers can inspect the real, native interactions. Interaction Mode lays out each trigger and its resulting actions, each with important information for engineers like easing curves and delays.

4. Native Playback

In addition to seeing the interaction details, engineers can also experience Play prototypes in their native environment (the phone!). Play uses Apple's Core Animation to render prototypes with the same technology as a finished mobile app, so all interactions are performant, interruptible, and feel real.

Engineers can experience the interactions on their phone repeatedly, until they have a solid understanding of what they’re building and how it should feel. They can even adjust the playback to see animations in slow motion, so everyone can be sure that the final code output is identical to the design.

5. SwiftUI Code

Play generates SwiftUI code in real time based on the current selection. This is possible due to the way designs in Play are structured and use native elements and properties.

Engineers can easily copy the code to lay out views in Xcode, saving them a ton of time. Even if engineers choose to rewrite the SwiftUI code in their own style, Play’s SwiftUI code export serves as a helpful reference point.

Whether engineers copy code, inspect properties, or some combination of the two, their process is a lot easier with Play. Play gives designers the tools to “speak” engineers’ language, so engineers can focus on bringing the product to life rather than translating static design files to code.

If you’re an engineer using Play and you’d like to get your whole team using Play, reach out to us to book a demo.

If you’re interested in trying Play, download the macOS and iOS apps here.