Introduction

Designing with “real materials” in Play provides huge benefits to both the design and engineer workflows. We created this document to show you what our approach has been with implementing our SwiftUI code export. There are four core areas we’ll explore:

  1. Styles: How do we serve up primitives like type, color, gradients, and spacing in our code export.
  2. Native Elements: Code export for Apple’s native elements, SF Symbols, and more.
  3. Custom Elements: Code export for anything a designer creates that can be brought into Xcode to lay out views.
  4. Interactions: Currently in development, you will be able to export code for the interactions (prototypes) you create in Play as well.

In each of the sections we have included screenshot and videos from the Play product as well as snippets of generated SwiftUI code from Play. The SwiftUI code can be seen in the pink toggles like the one below.

Styles

Play encourages designers to save any custom styles into a library representing color, gradients, typography, spacing, and corner radius. Our export will clearly define these as variables or modifiers, as a developer would.

Most iOS apps use some amount of System Color and Type, which Play encourages designers to take advantage of. This leads to code export that uses the proper native modifiers, so developers don’t need to spend time tweaking values to match what they see.

Designers who work in Play create work that is more consistent and leads to a more compact code export.

1. System Font

Play lets you customize Apple’s full range of options for System Fonts like the design (Default, Monospace, Rounded, and Serif) and width (Standard, Compressed, Condensed, and Expanded), in addition to the normal properties like weight, size, and line height.

Untitled