Baseline #15 – Creating with Play

Hello again! 👋 Readers of this newsletter may know that one of the projects I’ve long worked on was creating a series of iOS UI kits available within the Figma Community. It was one of the most rewarding experiences I’ve had in my career, and I still can’t believe those files were duplicated nearly 700,000 times. Although I’ve wrapped up creating those files now that Apple has released official ones, I’m forever grateful to the entire design community for their immense encouragement and support. 🙏

The project started with iOS 13 way back in 2020, as I often needed to take screenshots of UI elements from iOS to use within Figma to make the design more realistic and accurate. Like many at the time, I’d screenshot and crop elements such as the top Status Bar, context menus, or images, but those screenshots almost always required drawing boxes over irrelevant items or doing my best to recreate a new element to blend in. The mix of vectors and images left the designs feeling somewhat messy and unpolished, and I wondered, were others feeling this frustration, and if so, could I do something to help?

To start, I began to import various screenshots of UI elements from iOS into Figma and carefully traced them to create components that could be used repeatedly throughout the design tool. Although it was time-consuming, I discovered myself feeling so much joy in the ability to dive deep into something that, for a brief moment, took my mind away from the anxiety and uncertainty that many of us were going through at the time. I fell in love with working within this newly-formed digital garden, working a little here and a little there, and continued the project for years to come.

A little while ago, I came across a new design tool called Play, and it’s a product design tool centered around helping designers create mobile apps through the power of both iOS and SwiftUI. Within this newsletter, I'd love to share more about the design tool, which, as someone who sincerely enjoys recreating and working with Apple's native interface elements for iOS, has completely captured my interest. Let’s get into it!

Subscribe now

What is Play?

Play is available on macOS, iPadOS, and, of course, iOS. The best part? Not only can you preview and play with your designs on those mobile devices, but you can actually design—like, entirely fully design, them there, too! With how much complexity this contains and the intuitiveness required to create a good experience, I’ve found Play to be an interface designer’s dream to explore.

Play feels unique because it combines the traditional infinite canvas that many of us know today with all of Apple’s native interface elements, like Toggles and Date Pickers, along with device interactions, such as haptic feedback and animations. This is because designs created with Play are automatically rebuilt in Swift, leaving each platform-level element feeling as natural and usable as the genuine thing.

Coming from the world within Figma, where to begin creating with native iOS elements, they first need to be designed or brought in from an external UI kit, being able to quickly design and prototype with the real thing feels a bit like magic. It's been fun to pair designing in Figma with creating and feeling something real within Play.

I’ve been exploring Play for a few months now and would love to share more about what it can do with you. To get started, let’s first focus on all of the fundamentals!

Creating with Play

Downloading Play

Play just launched their new macOS and iOS apps on the App Store. You can install the macOS app on your desktop and iOS app on your phone by clicking here. Since you will use the iOS app to view your designs and prototypes (and even edit your designs!) make sure you install both apps.

The Basics

To begin designing with Play, let’s first become familiar with the app’s interface. Throughout this newsletter, I’ll be using Play primarily within its macOS app, but what is still so amazing to me and hard to believe is that nearly everything I create within the desktop app can be made within the iOS or iPadOS app. Play’s controls and interface are all relatively similar to other tools, lowering the barrier to entry, but the tool comes with several unique patterns and interactions, too!

Projects

To kick things off, I’ll focus on projects within Play. Projects are the equivalent of files within other design tools, such as Figma. Think of projects as the files where the designs exist; each project can have its own set of styles, assets, components, and pages. Within both Play for macOS and Play for iOS, projects can be created by tapping the + icon towards the top right.

Pages

Each project within Play can contain various pages, representing an entirely separate design. Coming from a world of tools designed to emphasize the entire flow, Play’s approach of focusing on one screen at a time feels refreshing, and because each page is contained by the project it's within, styles, assets, and components can be shared across designs. Additionally, instead of seeing several large, long frames, Play shows the screen of the iPhone, where scrolling then reveals additional length and content. As I designed and built within the tool, I felt as if I were placing actual interface elements on a phone screen rather than on a rectangle, which would then be viewed on the phone.

Interface Elements

Within Play for macOS, at the top are three core tabs that I’ve often switched between as I designed: Project, Design, and Interaction. Tapping on Project reveals all the pages and components within the project. Switching to the Design tab surfaces Play’s design environment, and tapping on the Interaction tab is where new interactions can be created and existing interactions can be modified.

When I first began exploring within Play, I noticed two colors were often used when selecting items: green and magenta. While tools like Figma use blue and purple to indicate elements and components, Play uses green and magenta to display elements (non-repeatable objects) and components (repeatable objects).

Various side panels exist within Play; if you’ve used other design tools, these panels and controls should feel quite familiar! On the left are panels for layers, styles, and code snippets, and on the right are dynamic panels based on current selections. With no layers selected, the Canvas and Device Panels appear, revealing page-level controls such as device size, the phone’s material inclusion, and the ability to Snap to Object. If the page or object is selected, Layout, Positioning, and Appearance Panels are visible.

Finally, towards the bottom of Play is the Add Bar, where we’ll find the ability to add objects to our design, such as Text, Stacks, Images, components from the library, and, of course, any native iOS control. Coming from a world where I had needed to have these elements designed before using them within a design, this drawer feels all sorts of amazing.

And because everything is native, all controls can be manipulated directly from the canvas while designing.

Components

Components created in Play work very similar to components made in other tools, with one feature that stands out: the ability to easily create and visualize various component states, which represent different behaviors or visual adjustments the component can have. Again, what’s absolutely incredible here is that no matter the design action you want to create, you can do so from both Play’s desktop and mobile apps. Mind-blowing.

Elements

Elements are the foundational building blocks that allow us to easily create complex interfaces with advanced controls. In Play, there are two types: basic elements and native elements, and those elements can be added to a design from Play’s iOS and Mac apps. Basic elements are the traditional building blocks, such as text, images, and stacks, whereas native elements include items like Switch, Map, Stepper, Charts, and even Camera, all available from Apple’s UIKit.

Basic Elements

Stacks

A little while ago, I spent several months diving deep into the world of SwiftUI as I wanted to begin to better understand how native apps for Apple’s platforms were created and to try to experiment with a few prototypes of my own. When learning the language, the layout concept of stacks stood out because they allow content to be organized and aligned within designs, very similar to using frames with auto layout in tools like Figma.

Stacks were a tool that I fell in love with due to their simplicity and how they quickly let you take various interface elements and place them in a horizontal, vertical, or overlay layout. Those stacks or layouts could then be stretched to fill their respective stack, hug the content within, or take on custom sizing properties. They’re incredibly easy to use, and I was so excited to see that stacks are built directly into Play, too!

Here’s an example of adjusting a card layout using stacks. The card is a single stack, and within is a stack containing the primary and secondary text. To change this card to match the layout I’m after, all I need to do is adjust the direction of the outer stack and the stack that sits within. Amazing!

Text, Images, Icons, SVGs, and more!

While stacks are the foundational element within Play and iOS design, several more basic elements can be used within the design tool. Text, Image, SF Symbols, Video, Images, SVGs, and more are all available for use in the design you’re creating.

Native Elements

The ability to use native elements within Play makes the design tool feel unique because it lets us begin working with and customizing real components from iOS. Controls such as Sliders, Switches, or complex interfaces like Maps can be added to a design.

I’m someone who wants to learn as much about iOS as I can, and what I think is fantastic about using Play as a designer is that when using native elements, such as Segmented Controls, Play’s interface exposes actual code, along with matching interface controls that allow for the customization of that element.

Within the example below, I brought in a Segmented Control, and on the left, Play shows the actual code output that I could use to generate this control. On the right, Play’s interface surfaces the ability to customize any available options, such as the labels for this control.

Interactions

As I continued exploring Play, I began designing a small app that might let my wife and I share our recent and upcoming trips together. Each piece was created using native iOS elements or quick combinations of stacks and basic elements. I felt so excited to finish the design and see if I could make it all feel real, especially given how many native interactions the design tool supports. This is where interactions within Play come in.

Interactions are created through a combination of triggers and actions. A trigger is what needs to happen to begin the interaction, and an action is what occurs. There are so many combinations to choose from to fit the design you’re making.

In the app I was working on, I wanted to create a simple but native drawer that would appear when tapping each featured trip memory to display more detail about that particular adventure. To make this interaction, the first step was to switch to Interaction Mode at the top left of Play for macOS, although if you can believe it, interactions can be created directly from Play for iOS, too! Once in Interaction Mode, clicking on the purple plus icon on the right of a selected element reveals a list of triggers (again, those are simply the starting item that causes the action to occur). These triggers can be events such as a tap, scroll, pan, long press, or even identifying when touching begins and ends. In the case of the design I was working on, choosing a tap felt most appropriate as a way to launch into the modal drawer.

With the tap trigger set, it was time to specify the action. Actions within Play are powerful and can be everything from navigating to a different page to specific haptics, launching the camera, or dismissing the keyboard. For this action, I selected the Open Modal action. Once an action is specified, settings for the action appear, which provide options for further customization. In the case of my Open Modal action, I needed to select a page to use within the modal. I could then choose between available sizes, corner radius options, preventing or allowing dismissal, or even letting interactions beneath the modal continue. With a few clicks, I had a native iOS modal working!

Playing with Play

Experimenting and building with Play has been so fun, as it’s allowed me to go from design to using what feels like the authentic thing in just a matter of minutes. Working for years to build out iOS system components in Figma so that I could begin to design with them taught me so much, and to now have the ability to create and play with them in a tool that allows for the actual native element to be used is simply incredible. In my work, I’m so excited to continue using both Figma and Play to explore and prototype designs in a way that feels as real as possible to create the best thing possible. If you’re beginning your journey with Play, let me know! I’d love to see what you’ve made and all you choose to explore. ▶️

Note: All words and experiences shared are my own, and the Play team compensated me for my time as a way to help support my independent journey with Baseline.