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, components, and styles. Let's take a look.
Home opens or shows the Lobby window
Project name
Add elements from the add menu
Add components, assets, and fonts from the library
Left side panels like Layers, Styles, Swift Code, Variables, and Events
Left panel toggles show and hide their respective panels
Switch between open page tabs
View the teammates who are currently editing the project
Share your project's design file or prototype link from the Share Panel
Right side attributes panels
Add elements from the quick add menu
Switch between Project Overview, Design Mode, and Interaction Mode
Design your prototype on the page
Design overflow like main components, explorations, and variations in the canvas
You can also adjust the zoom and find help resources in the top toolbar.
Left Panels
In the bottom left, there are five icons representing the five left panels: Layers, Styles, Swift Code, Variables, and Events. Clicking each will toggle the corresponding panel into view and out of view.
The Layers Panel is where you will see the structure for all the layers on your page. Read more about the Layers Panel.
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.
The Code Panel takes your selection and writes usable SwiftUI code to make engineering handoff easier. Read more about Play's code export functionality.
The Variables Panel is where you can define and manage variables and their initial values. Read more about variables in Play.
The Events Panel is where you can define events to be used in custom event interactions. Read more about events.
Below these panel icons is the help icon, which can link you to our Getting Started content, support documentation, keyboard shortcut list, and feedback/bug reporting.
Right 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 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 Menu
The add menu is where you'll add elements, native elements, and components, assets, and fonts from your library to your page/project.
Read more about adding objects to your page.
