Shortcuts
Use shortcuts to work in the Design editor faster and more efficiently.
To see a list of all available shortcuts, click on the question mark in the lower right corner and select Show shortcuts.
A panel will open at the bottom of the screen with shortcuts grouped by tab.
Name | Windows OS | Mac OS |
|---|---|---|
Show/hide shortcuts | Ctrl + Shift + ? | ⌃Ctrl + ⇧Shift + ? |
Show/hide preview | Ctrl + \ | ⌘Cmd + \ |
Show/hide outlines | Shift + O | ⇧Shift + O |
Show/hide hidden elements | Shift + H | ⇧Shift + H |
Show/hide margins and paddings on Canvas | Shift + L | ⇧Shift + L |
Show/hide empty elements | Shift + E | ⇧Shift + E |
Show/hide element pointers | Shift + U | ⇧Shift + U |
Show/hide element label on Canvas | Shift + N | ⇧Shift + N |
Show/hide publish dialog | Shift + P | ⇧Shift + P |
Show/hide breadcrumbs | Shift + B | ⇧Shift + B |
Show/hide left panel | Shift + R | ⇧Shift + R |
Show layers tab (with expanded Navigator panel) / Show elements panel (with Navigator panel minimized) | Shift + 1 | ⇧Shift + 1 |
Show assets tab (with expanded Navigator panel) / Show layers tab (with Navigator panel minimized) | Shift + 2 | ⇧Shift + 2 |
Show pages tab (with expanded Navigator panel) / Show assets tab (with Navigator panel minimized) | Shift + 3 | ⇧Shift + 3 |
Show elements panel (with expanded Navigator panel) / Show pages tab (with Navigator panel minimized) | Shift + 3 | ⇧Shift + 4 |
Show styles tab | Shift + 7 | ⇧Shift + 7 |
Show settings tab | Shift + 8 | ⇧Shift + 8 |
Change breakpoints | 1 … 7 | 1 … 7 |
Expand/collapse style section | Alt + S | ⌥ Option + S |
Expand/collapse layers | Alt + Z | ⌥ Option + Z |
Name | Windows OS | Mac OS |
|---|---|---|
Reset selected style | Shift + left mouse button click | ⌥ Option + left mouse button click |
Change margins and paddings (from all sides) | Shift + drag&drop | ⇧Shift + drag&drop |
Change margins and paddings (from opposite sides) | Alt + drag&drop | Option ⌥ + drag&dropp |
Expand/collapse all styles sections | Alt + S | Option ⌥ + S |
Open color picker to select a color on Canvas | I | I |
Undo changes | Ctrl + Z | ⌘Cmd + Z |
Redo changes | Ctrl + Shift + Z | ⌘Cmd + Shift + Z |
Save changes | Ctrl + S | ⌘Cmd + S |
Name | Windows OS | Mac OS |
|---|---|---|
Copy | Ctrl + C | ⌘Cmd + C |
Paste | Ctrl + V | ⌘Cmd + V |
Cut | Ctrl + X | ⌘Cmd + X |
Duplicate | Alt + drag&drop | Option ⌥ + drag&drop |
Duplicate with Selection (the newly created element is selected) | Ctrl + D | ⌘Cmd + D |
Name | Windows OS | Mac OS |
|---|---|---|
Cancel selection/Undo action | Esc | Esc |
Delete element | Delete | Delete |
Select parent’s child element | Enter | Enter |
Select parent element | \ | \ |
Select next sibling | Alt + } | Option ⌥ + } |
Select previous sibling | Alt + { | Option ⌥ + { |
Wrap element in a div | Shift + A | ⇧Shift + A |
Deep selection (lowest element in the hierarchy) | Ctrl + left mouse button click | ⌘Cmd + left mouse button click |
Name | Windows OS | Mac OS |
|---|---|---|
Zoom in | Ctrl + + | ⌘Cmd + + |
Zoom out | Ctrl + - | ⌘Cmd + - |
100% size | Ctrl + 0 | ⌘Cmd + 0 |
Zoom to fit the Canvas width | Ctrl + Shift + 1 | ⌘Cmd + ⇧Shift + 1 |
Name | Windows OS | Mac OS |
|---|---|---|
Create component | Ctrl + Alt + K | Option ⌥ + ⌘Cmd + K |
Detach component | Ctrl + Alt + B | Option ⌥ + ⌘Cmd + B |