Three buttons in the bottom center of the Editor let you switch between the Project Overview, Design Mode, and Interaction Mode. Each mode allows you to add and manage different features.
Project Overview
The Project Overview lets you view all pages in your current project. You can rename, duplicate, and delete pages and components in this mode. You can enter the Project Overview by clicking the Project 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 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)
Design Mode
Design Mode is where you'll build your design's layout using elements, native controls, components, and more. Read more about Design Mode.
Interaction Mode
Interaction Mode is where you'll add interactions, made from triggers and actions, to your designs. Read more about Interactions.
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.