The Editor is where you'll spend most of your time in Play. In the Editor, you'll design your project's UI and interactions, in addition to managing your project's pages, component, and styles. Let's take a look.

The home button will show the Lobby’s window or, if the Lobby is closed, open the Lobby in a new window.

The modes specify what you're editing. Read more about Play's three modes, Project Overview, Design Mode, and Interaction Mode, here.

The tabs let you switch which page you're editing.

The teammates list shows you which of your teammates are also editing your current project. You'll also see these teammates's cursors move as they're editing.

The Share Panel lets you share your project's design file or prototype link. Read more here.

The Play Mode pop up shows which iOS devices are currently connected and presents a QR code that, when scanned using your iPhone, will open the project in Play Mode.

You can also adjust the zoom and find help resources in the top toolbar.

The Layers Panel is where you will see the structure for all the layers on your page. Read more about the Layers Panel here.

The Styles Panel is where you can manage all the design styles for your project like color, type, and spacing. Learn about Play's Design System management here.

The Code Panel takes your selection and writes usable SwiftUI code to make engineering handoff easier. Read more about Play's code export functionality here.

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 Canvas Panel lets you select the UI Appearance for the Editor (light, dark, or Auto) and enable the Snap to Object property. This panel is only visible if nothing is selected.

The Device 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.

The Canvas Position Panel lets you place your object at any X and Y position within the canvas. 0,0 is the position at the top right of the page, and you can use positive or negative values to position your object from there. This panel is only visible if you're editing an object in the freeform canvas.

The Add Bar is where you'll add elements, native elements, components, assets, and fonts to your page/project. Read more about adding objects to your page here.

​