Search icon

Shortcuts.design

Webflow Shortcuts

Design and develop at the same time! Webflow gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you. View or buy Webflow via Webflow.com.

Edit or add shortcuts on Github

  • Mac
  • Windows
General
Show shortcut cheatsheet⇧ /
Save as Snapshot⇧ ⌘ S
Deselect/AbortEsc
Delete ElementDelete
Show Publish Dialog⇧ P
Show Export Code Dialog⇧ E
Edit menu
Undo⌘ Z
Redo⇧ ⌘ Z
Cut⌘ X
Copy⌘ C
Paste⌘ V
Paste Appearance (in Design mode), and⌥ ⌘ V
Paste Interaction (in Prototype mode)
Duplicate⌘ D
Select All⌘ A
Deselect All⇧ ⌘ A
View
‍Preview mode⇧ ⌘ P
Grid overlay⇧ ⌘ G
Show element edges⇧ ⌘ E
X-ray mode⇧ ⌘ X
Left-hand Toolbar
Show Add panelA
Show Pages panelP
Show Symbols panel⇧ A
Make selected element a Symbol⌘ ⇧ A
Show Asset ManagerJ
Right-hand Tabs
‍Show Style tabS
Show Settings tabD
Show Navigator tabF
Show Style Manager tabG
Show Interactions tabH
Copy/paste
‍Copy⌘ C
Cut⌘ X
Paste⌘ V
Duplicate ⌥ Drag
Undo/redoUndo/redo
Undo⌘ Z 
Redo⇧ ⌘ Z 
Device Views
‍Desktop1
Tablet2
Phone (landscape)3
Phone (portrait)4
Other
‍Margin / padding (all sides)⇧ Drag
‍Margin / padding (top + bottom or left + right)⌥ drag
Select parent / child element↑ / ↓
Select sibling element← / →
Select next / previous element⌥ ← / →
Add class to selected element⌘ ↩
General
Show shortcut cheatsheetShift /
Save as SnapshotShift Ctrl S
Deselect/AbortEsc
Delete ElementDelete
Show Publish DialogShift P
Show Export Code DialogShift E
Edit menu
‍Preview modeShift Ctrl P
Grid overlayShift Ctrl G
Show element edgesShift Ctrl E
X-ray modeShift Ctrl X
View
‍Preview mode⇧ ⌘ P
Grid overlay⇧ ⌘ G
Show element edges⇧ ⌘ E
X-ray mode⇧ ⌘ X
Left-hand Toolbar
Show Add panelA
Show Pages panelP
Show Symbols panelShift A
Make selected element a SymbolCtrl Shift A
Show Asset ManagerJ
Right-hand Tabs
‍Show Style tabS
Show Settings tabD
Show Navigator tabF
Show Style Manager tabG
Show Interactions tabH
Copy/paste
‍CopyCtrl C
CutCtrl X
PasteCtrl V
Duplicate Alt Drag
Undo/redoUndo/redo
UndoCtrl Z
RedoShift Ctrl Z
Device Views
‍Desktop1
Tablet2
Phone (landscape)3
Phone (portrait)4
Other
‍Margin / padding (all sides)Shift Drag
‍Margin / padding (top + bottom or left + right)Alt drag
Select parent / child element↑ / ↓
Select sibling element← / →
Select next / previous elementAlt ← / →
Add class to selected elementControl + Enter
Empty state Shortcuts.design toolspage search Empty state Shortcuts.design toolspage search

We searched everywhere, but we couldn’t fine a shortcut matching your search-query.

Try searching for something else. Think we’re missing something? Send us an issue or add it yourself.

Add a missing shortcut 💪️

Helping out

Missing something?

Feel free to request missing tools or give some feedback using Twitter, E-mail or GitHub! If you can, please help out by adding the data yourself and be the hero of the ±12k people per month using this resource.

Add a tool 💪
Michel van Heest - Creator of Shortcuts.design

Created by

Michel van Heest

Designing products that enable others to to create or become more effective · Currently Product Designer @ConvertCalculator · Prev @WeTransfer, @Awkward & @YipYip.

Buy me a coffee ☕ Twitter 🐦
Design calculators, forms, and more without code with Convert_, and embed them in Framer.