Framer Keyboard Shortcuts: Complete List for Mac & Windows
Quick answer: To see every keyboard shortcut inside Framer, open the project menu → Help → Keyboard Shortcuts, or press ⌘ + / on Mac (Ctrl + / on Windows). To run any command by name, open the Command Palette with ⌘ + K (Mac) or Ctrl + K (Windows). Most Framer shortcuts are identical across platforms just swap ⌘ for Ctrl and ⌥ (Option) for Alt.
What Are Framer Keyboard Shortcuts?
Framer keyboard shortcuts are key combinations that let you perform actions like inserting a frame, duplicating a layer, previewing, or publishing without clicking through menus. They cover tools, layout, text editing, view controls, and project commands, and they’re one of the fastest ways to speed up a design and website-building workflow in Framer.
Most-Used Framer Shortcuts
| Action | Mac | Windows |
|---|---|---|
| Command Palette | ⌘ + K | Ctrl + K |
| View all shortcuts | ⌘ + / | Ctrl + / |
| Copy | ⌘ + C | Ctrl + C |
| Paste | ⌘ + V | Ctrl + V |
| Cut | ⌘ + X | Ctrl + X |
| Duplicate | ⌘ + D | Ctrl + D |
| Undo | ⌘ + Z | Ctrl + Z |
| Redo | ⌘ + Shift + Z | Ctrl + Shift + Z |
| Select All | ⌘ + A | Ctrl + A |
| Group | ⌘ + G | Ctrl + G |
| Ungroup | ⌘ + Shift + G | Ctrl + Shift + G |
| Rename layer | ⌘ + R | Ctrl + R |
| Lock / Unlock | ⌘ + Shift + L | Ctrl + Shift + L |
| Delete | Delete | Delete / Backspace |
| Preview site | ⌘ + P | Ctrl + P |
Tool Shortcuts
| Tool | Shortcut |
|---|---|
| Insert menu | I |
| Frame | F |
| Text | T |
| Stack | S |
| Vector / Graphic | G |
| Link | L |
| Comment | C |
| Zoom | Z |
| Move / Selection | V |
Layout & Stack Shortcuts
| Action | Mac | Windows |
|---|---|---|
| Add Frame | ⌘ + Return | Ctrl + Enter |
| Wrap in Stack | ⌘ + ⌥ + Return | Ctrl + Alt + Enter |
| Bring Forward | ⌘ + ⌥ + ↑ | Ctrl + Alt + ↑ |
| Send Backward | ⌘ + ⌥ + ↓ | Ctrl + Alt + ↓ |
| Bring to Front | ⌘ + ⌥ + Shift + ↑ | Ctrl + Alt + Shift + ↑ |
| Send to Back | ⌘ + ⌥ + Shift + ↓ | Ctrl + Alt + Shift + ↓ |
View & Zoom Shortcuts
| Action | Mac | Windows |
|---|---|---|
| Zoom In | ⌘ + + | Ctrl + + |
| Zoom Out | ⌘ + – | Ctrl + – |
| Zoom to 100% | ⌘ + 0 | Ctrl + 0 |
| Zoom to Fit | ⌘ + 1 | Ctrl + 1 |
| Zoom to Selection | ⌘ + 2 | Ctrl + 2 |
| Pan canvas | Hold Space + drag | Hold Space + drag |
| Hide / Show UI | ⌘ + . | Ctrl + . |
Text Editing Shortcuts
| Action | Mac | Windows |
|---|---|---|
| Bold | ⌘ + B | Ctrl + B |
| Italic | ⌘ + I | Ctrl + I |
| Underline | ⌘ + U | Ctrl + U |
| Edit text | Enter (with text layer selected) | Enter |
Component Shortcuts
| Action | Mac | Windows |
|---|---|---|
| Create Component | ⌘ + K → “Create Component” | Ctrl + K → “Create Component” |
| Detach / Edit instance | Double-click instance | Double-click instance |
How to View All Shortcuts in Framer
You don’t have to memorize anything. Framer has a built-in panel that lists every active shortcut:
- Open your Framer project.
- Click the project menu (top-left).
- Go to Help.
- Select Keyboard Shortcuts.
- A pop-up displays the full, up-to-date list.
Faster way: press ⌘ + / (Mac) or Ctrl + / (Windows) to open the same panel instantly.
The Command Palette (⌘/Ctrl + K)
The Command Palette is the single most useful shortcut in Framer. Press ⌘ + K (Mac) or Ctrl + K (Windows) and start typing the name of any action insert, publish, rename, swap component, change layout and run it without hunting through menus. If you only learn one shortcut, learn this one.
How to Customize Framer Shortcuts
If a default key combo clashes with your habits, you can reassign it:
- Open the project menu → Help → Keyboard Shortcuts (or press ⌘/Ctrl + /).
- Find the action you want to change.
- Click the existing shortcut and press your new key combination.
- Framer saves it automatically for your account.
Because Framer updates regularly, the in-app panel is always the source of truth for what’s currently assigned.
Legacy: Framer X Shortcuts (macOS-only)
“Framer X” was the older macOS-only desktop app, since replaced by today’s web-based Framer. If you’re still maintaining an old Framer X file, these historical shortcuts applied to that version. They are kept here for reference only for current work, use the Mac & Windows tables above.
| Action | Framer X (Mac only) |
|---|---|
| New | ⌘ + ⌥ + N |
| Show Preview | ⌘ + P |
| Preview in New Window | ⌘ + ⌥ + P |
| Export Selection | ⌘ + E |
| Export All | ⌘ + ⌥ + E |
| Copy Style | ⌘ + ⌥ + C |
| Paste Style | ⌘ + ⌥ + V |
| Create From Design | ⌘ + K |
| Create From Code | ⌘ + Shift + K |
| Sample Color | Control + C |
Download the Free Framer Shortcuts Cheat Sheet (PDF)
Grab a printable one-page cheat sheet with all the Mac and Windows shortcuts below.
Download Framer Shortcuts PDF →
Frequently Asked Questions
Do Framer keyboard shortcuts work on Windows?
Yes. Framer has a Windows desktop app and a web app, and shortcuts work in both. On Windows, replace ⌘ with Ctrl and ⌥ (Option) with Alt. Single-letter tool shortcuts (I, F, T, S) are identical across platforms.
How do I see all shortcuts inside Framer?
Open the project menu → Help → Keyboard Shortcuts, or press ⌘ + / (Mac) / Ctrl + / (Windows) to open the full list instantly.
What is the Command Palette in Framer?
It’s a searchable command menu opened with ⌘/Ctrl + K. Type the name of any action insert, publish, rename, create component and run it without using menus.
Is Framer X the same as Framer?
No. Framer X was the older macOS-only desktop app. Today’s Framer is a web-based design and website-building tool with both Mac and Windows desktop apps. Their shortcuts overlap but aren’t identical.
Can I customize Framer keyboard shortcuts?
Yes. Open the Keyboard Shortcuts panel, click the existing combo for any action, and press your preferred keys to reassign it.
Do these shortcuts work in the Framer web app?
Yes the same shortcuts apply in the browser version and the desktop apps.
READ NEXT:
