The Designer has many keyboard shortcuts to help you speed up your design workflow. The quickest way to see the list of all shortcuts in the Designer is pressing Shift + /. You can also access this list from the help menu on the bottom left of the Designer.
In this lesson, you’ll learn:
- General shortcuts
- View shortcuts
- Left-hand toolbar shortcuts
- Right-hand tabs shortcuts
- Copy/paste shortcuts
- Undo/redo shortcuts
- Device view shortcuts
- Style panel shortcuts
- Other shortcuts
- Find shortcuts
- Move element shortcuts
Note: If you have any ideas for a cool keyboard shortcut, let us know and we’ll look into adding it.
General shortcuts
- Show shortcut cheatsheet: Shift + /
- Save as snapshot: Shift + Command + S (Mac) or Shift + Control + S (Windows)
- Deselect element/exit: Esc
- Delete element: Delete
- Show publish dialog: Shift + P
- Show export code dialog: Shift + E
- Edit element: Enter
View shortcuts
- Preview mode: Shift + Command + P (Mac) or Shift + Control + P (Windows)
- Guide overlay: Shift + Command + G (Mac) or Shift + Control + G (Windows)
- Show element edges: Shift + Command + E (Mac) or Shift + Control + E (Windows)
- X-ray mode: Shift + Command + X (Mac) or Shift + Control + X (Windows)
Left-hand toolbar shortcuts
- Show Add panel: A
- Show Navigator panel: Z
- Show Pages panel: P
- Show Components panel: Shift + A
- Make selected element a component: Command + Shift + A (Mac) or Control + Shift + A (Windows)
- Show Assets panel: J
Right-hand tabs shortcuts
- Show Style panel: S
- Show Element settings panel: D
- Show Style Manager panel: G
- Show Interactions panel: H
Copy/paste shortcuts
- Copy: Command + C (Mac) or Control + C (Windows)
- Cut: Command + X (Mac) or Control +X (Windows)
- Paste: Command + V (Mac) or Control +V (Windows)
- Duplicate: Command + D (Mac) or Control + D (Windows)
- Duplicate: Option + Drag (Mac) or Alt + Drag (Windows)
Undo/redo shortcuts
- Undo: Command + Z (Mac) or Control + Z (Windows)
- Redo: Shift + Command + Z (Mac) or Shift + Control + Z (Windows)
Device view shortcuts
- Desktop: 1
- Tablet: 2
- Phone (landscape): 3
- Phone (portrait): 4
Style panel shortcuts
- Margin / padding (all sides): Hold Shift + Drag
- Margin / padding (top + bottom or left + right): Hold Alt + drag
- Add class to selected element: Command + Enter (Mac) or Control + Enter (Windows)
- Rename last class on selected element: Command + Shift + Enter (Mac) or Control + Shift + Enter (Windows)
Other shortcuts
- Expand/collapse panel sections: Alt + click on section
- Select parent / child element: Up arrow / Down arrow
- Select sibling element: Left arrow / Right arrow
- Select next / previous element: Alt + Left arrow / Right arrow
- Toggle content editors on selected element: Command + Shift + L (Mac) or Control + Shift + L (Windows)
- Duplicate last class on selected element: Command + Option + Enter (Mac) or Control + Alt + Enter (Windows)
- Remove last class on selected element: Option + Shift + Enter (Mac) or Alt + Shift + Enter (Windows)
- Wrap element in H Flex: Option + G (on Mac) or Alt + G (on Windows)
- Wrap element in V Flex: Command + G (on Mac) or Control + G (on Windows)
- Unwrap element: Command + Shift + G (on Mac) or Control + Shift + G (on Windows)
Find shortcuts
- Quick find: Command + E (Mac) or Control + E (Windows) / Command + K (Mac) or Control + K (Windows)
Move element shortcuts
These shortcuts let you move elements on the canvas:
- Move element before previous element: [ or Command + Down (Mac) or Control + Down (Windows)
- Move element after previous element: ] or Command + Up (Mac) or Control + Up (Windows)
- Moves element before sibling element within current parent: Command + [ or Command + Left (Mac) or Control + Left (Windows)
- Moves element after sibling element within current parent: Command + ] or Command + Right (Mac) or Control + Right (Windows)
- Move element before parent element: Command + Shift + Up (Mac) or Control + Shift + Up (Windows)
- Move element after parent element: Command + Shift + Down (Mac) or Ctrl + Shift + Down (Windows)
Move element shortcut limitations:
- You won’t be able to move elements outside of dynamic elements (e.g., a Collection list)
- If you try to move a pinned element from its parent element (e.g., moving a Slider mask outside of the Slider wrapper), the entire parent element (e.g., the Slider wrapper) will move