Skip to main content

​
Overview

Design Mode, in the editor, is where you build the structure of your project in Play. You’ll add objects (elements or components) to your page or canvas, then style each object, and compose full pages. Every object you add becomes part of hierarchy that defines how your design is structured, how it will adapt across devices, and how it will export to Xcode.

​
Design with Structure

Play uses same layout system as SwiftUI. Instead of a freeform canvas, layouts are defined by stacks that organize objects either vertically (V Stack), horizontally (H Stack), or in layers (Z Stack). Each stack controls how its children are positioned, spaced, and aligned. To move objects out of the structured layout, you can pin objects to specific edges of their parent container. This layout approach is very similar to Auto Layout in Figma—you’re defining structure and hierarchy through constraints and direction, rather than placing elements arbitrarily on a canvas.

​
Design Mode UI

​
Add Objects

The Add Panel is where you’ll add elements, native elements, and components, assets, and fonts from your library to your page/project.

​
Layers, Styles, Variables, Code, Events, and AI Panels

  • The Layers Panel is where you will see the structure for all the layers on your page. OPT + 1
  • The Styles Panel is where you can manage all the design styles for your project like color, type, radius, and spacing. OPT + 2
  • The Variables Panel is where you can define and manage variables and their initial values. Read more about variables in Play. OPT + 4
  • The Events Panel is where you can define events to be used in custom event interactions. OPT + 5
  • The Code Panel provides SwiftUI layout code (work in progress), Play SDK implementation, property code, and the selection’s hierarchy. OPT + 3
  • The Play AI Panel is where you can prompt Play AI to design, prorotype, and generate AI Views. OPT + 6

​
Attribute Panels

The attribute panels are where you view & adjust the settings for an object or page. You can modify the object’s element-specific properties, layout, position, and appearance. The Project Panel lets you select the UI Appearance (light, dark, or Auto) and orientation for the project. This panel is only visible if nothing is selected. The Preview Panel lets you see how your design looks across screen sizes, with and without an iPhone frame (Bezel), and in physical vs. point accurate sizes. The Device Panel is also only visible when nothing is selected.
⌘I