Skip to main content
All CollectionsLayout and Design
Play's Design Mode Interface
Play's Design Mode Interface
Updated over a week ago

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.

  1. Home opens or shows the Lobby window

  2. Project name

  3. Add elements from the add menu

  4. Add components, assets, and fonts from the library

  5. Left side panels like Layers, Styles, Swift Code, Variables, and Events

  6. Left panel toggles show and hide their respective panels

  7. Switch between open page tabs

  8. View the teammates who are currently editing the project

  9. Share your project's design file or prototype link from the Share Panel

  10. Right side attributes panels

  11. Add elements from the quick add menu

  12. Switch between Project Overview, Design Mode, and Interaction Mode

  13. Design your prototype on the page

  14. 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.

Did this answer your question?