Skip to main content
Keyboard Shortcuts
Updated over 3 months ago

Keyboard shortcuts can increase your efficiency while designing. Our keyboard shortcuts are available on Play for macOS.

All shortcuts are disabled when editing text.

Lobby Shortcuts

⌘ + N : New project

+ R : Reload

Editor Shortcuts

Page, Tab, and Window Shortcuts

+ N : New blank page

+ T : New tab

+ O : Open project (Open the Lobby)

+ SHIFT + O : View all pages / open page

+ W : Close tab

+ SHIFT + W : Window

+ A : Select everything on canvas

Mode Shortcuts

1 : Project Overview

2 : Design Mode

3 : Interaction Mode

UI Shortcuts

\ : Toggle UI

Tab Shortcuts

+ ⌥ + arrow key : Change tab

CTRL + Tab : Next tab

CTRL + SHIFT + Tab : Previous tab

Copy Shortcuts

+ C : Copy

+ V : Paste

+ D : Duplicate

Grouping Shortcuts

+ G : Group

SHIFT + A : Group

+ SHIFT + G : Ungroup

Zoom Shortcuts

+ : Zoom in

- : Zoom out

SHIFT + 0 : Zoom to 100%

SHIFT + 1 : Zoom to fit (Zooms to view everything)

SHIFT + 2 : Zoom to selection (zooms to 100% and centers on the selection)

Z : Zoom tool

Space : Pan tool

Add Panel Shortcuts

⌥ + A : Add Panel

A : Quick Add Menu [Elements for Design Mode, Interactions in Interaction Mode]

S or F : Stack

T : Text

I : Image

B : SF Symbol

K : Component & Asset Library

Left Panel Shortcuts

⌥ + 1 : Toggle Layers Panel

⌥ + 2 : Toggle Styles Panel

⌥ + 3 : Toggle Variables Panel

⌥ + 4 : Toggle Events Panel

⌥ + 5 : Toggle SwiftUI Code Panel

Data Editing Shortcuts

+ ENTER + Text Selected : Toggle text editing mode

ENTER + Text, Image, or SF Symbol Selected : Edit data

Order Shortcuts

[ : Send to back

] : Bring to front

+ [ : Send backward

+ ] : Bring forward

Layers Panel Shortcuts

+ Click on a Layer : Closes every layer

⌥ + Click on a Layer : Closes all the selected layer’s children

Selection Shortcuts

ENTER : Select all children

SHIFT + ENTER : Select the parent

TAB : Select next sibling

SHIFT + TAB : Select previous sibling

+ Click on an Object : Direct selection

SHIFT + Click on an Object : Add to / remove from selection

⌥ + Dragging Object : Duplicate selection

Interaction UX Shortcuts

D : to disable the selected node

+ D : to duplicate the selected node

Delete : to delete the selected node

A : Quick Add Menu [Elements for Design Mode, Interactions in Interaction Mode]

ENTER : to toggle collapse the selected node and all nodes attached (you can also double-click on the node's body)

M : to toggle collapse only the selected node

C : to toggle collapse only the attached nodes

+ R : to rename the node( or double-click on the node's title)

Did this answer your question?