Overview
Your project's editor is where you'll design, prototype, and ship your iOS or iPad apps.
The four buttons in the bottom center of the Editor let you switch between the Pages list, Components list, Design Mode, and Interaction Mode. Each mode allows you to add and manage different features.
Pages
The Pages tab lets you view all pages in your current project. You can rename, duplicate, and delete pages in this mode. You can enter the Pages tab by clicking the Pages button or using the shortcut 1 .
Each page in a project is a separate view that can connect. Double-click on any page to open it in a new tab.
In Play for macOS, each page is surrounded by a freeform canvas where you can create components, test layouts, and more. In Play for iOS, you can only view and edit what is on the actual page.
Creating a New Page
In the Project Overview, click the empty page with a plus icon or use the keyboard shortcut CMD + N. You’ll automatically be taken to the newly created page and a new tab will be added to the top tab bar.
On the newly created page in Design or Interaction mode, you can change the device's orientation between Portrait and Landscape.
On iOS, you can add a new page by tapping on the page name in the top left status bar menu. You'll see a list of pages to navigate to and a button to add a new page.
Managing Pages
Right-click on the page in the Project Overview for options to:
Copy your project's share link from this page
Rename this page
Duplicate this page
Delete this page
Open this page
Open this page in a new window
Set this page as the Initial Page (disabled if it is already the Initial Page)
Components
The Components tab lets you view all components in your current project. You can rename, duplicate, and delete components in this mode. You can enter the Components tab by clicking the Components button or using the shortcut 2 .
Double clicking on any component will open it in it's Main Component Editor. Read more about components.
Design
Design Mode is where you'll build your design's layout using elements, native controls, components, and more. Read more about Design Mode.
Interaction
Interaction Mode is where you'll add interactions, made from triggers and actions, to your designs. Read more about Interactions.
Device & Orientation
Play allows you to design Portrait apps or Landscape apps that are responsive across all device sizes. In Design or Interaction Mode, you can choose the initial orientation and the preview iOS or iPad device size. Read more about orientation.
Settings
The gear icon in the top left corner of your project opens your settings. From here, you can change the Editor's UI Appearance and other settings.
Tabs
You can easily switch between open pages and components using tabs. Each tab has the name of the page or component on it, as well as a button to close the tab or share the tab. You can right-click on the tab to rename the page or component, along with other options.