Framer Keyboard Shortcuts
Framer occupies an unusual middle ground between a design tool and a website builder, and its shortcut set reflects both halves of that identity — canvas and shape shortcuts borrow heavily from Figma's conventions (R for rectangle, T for text), which eases the transition for the large share of its users coming directly from Figma, while its interaction and publishing shortcuts exist for a job neither Figma nor Sketch really try to do: shipping a live, functioning site directly from the same file. Because components in Framer can carry real interactive states and code overrides rather than just static visual variants, jumping into a component's interaction settings is a more load-bearing action here than the equivalent would be in a purely static design tool, and its dedicated shortcut reflects that. Preview mode — seeing the design behave as an actual interactive prototype rather than static frames — gets used constantly during a working session, more so than in tools where prototyping is a separate, less central mode bolted onto core design work. CMS (content management) features, which give non-technical teammates a way to revise live-site copy and imagery without ever opening the design file itself, extend Framer's website-building half beyond what a pure design tool would ever need to support, since maintaining a live site's content over time is a fundamentally different ongoing need than finishing a one-time design deliverable. Code components, which let a developer write custom React code that then appears as a draggable, configurable layer directly in Framer's visual canvas, bridge the gap between visual design and custom functionality in a way that keeps design and implementation living in the same file instead of two separate places.
Canvas Tools
| Action | Windows | Mac | Description |
|---|---|---|---|
| Rectangle tool | R | R | Switches to the rectangle drawing tool, matching the same single-letter convention Figma uses for the equivalent tool, easing the transition for designers coming from there. |
| Text tool | T | T | Switches to the text tool for adding new text layers to the canvas. |
| Frame tool | F | F | Switches to the frame tool, used to create the responsive containers that underlie Framer's page and component layout system. |
| Group selection | Ctrl+G | Cmd+G | Groups the selected layers, standard convention shared with most design tools. |
| Duplicate selected layer | Ctrl+D | Cmd+D | Duplicates the selected layer or component instance, standard convention shared broadly with Figma and most other design tools. |
Components Interactions
| Action | Windows | Mac | Description |
|---|---|---|---|
| Open component properties panel | Right panel auto-shows on select (no dedicated key) | — | Shows the properties and variant controls for a selected component instance, letting you configure interactive states without editing the master component directly. |
| Add interaction/animation to layer | Right sidebar > Interactions | — | Opens the interaction configuration for the selected layer, letting you define triggers (tap, hover, scroll) and resulting animations, a core capability distinguishing Framer from purely static design tools. |
| Insert a code component | Insert menu > Code Component | — | Adds a custom React-based component to the canvas as a draggable, configurable layer, bridging visual design and custom developer-written functionality more directly than exporting static assets to a separate codebase would. |
Preview Publishing
| Action | Windows | Mac | Description |
|---|---|---|---|
| Enter interactive preview mode | Ctrl+P (varies) | Cmd+P | Switches to a live, interactive preview of the current design, letting you click and scroll through it as an actual prototype rather than viewing static frames, used constantly throughout a typical working session. |
| Publish site | Publish button (no dedicated key) | — | Pushes the current design live as an actual hosted website, a capability that goes meaningfully beyond what Figma or Sketch offer natively without third-party plugins or handoff to a separate developer. |
| Open CMS content panel | Left sidebar > CMS | — | Jumps into the CMS panel where text and image content on a live site can be edited directly, keeping non-technical teammates out of the design file entirely while they update copy or swap images. |
Frequently Asked Questions
Why do Framer's canvas shortcuts look so similar to Figma's?
A large share of Framer's target users come directly from Figma, and matching familiar single-letter tool shortcuts (R, T, F) reduces the learning curve for that transition deliberately, similar to how Photopea mirrors Photoshop's shortcuts for the same underlying reason of easing migration from a dominant incumbent tool.
Can I actually launch a real website from Framer without writing any code?
Yes — this is one of Framer's core differentiators from a pure design tool; the Publish action deploys the current design as a live, functioning website with its own hosting, which is a fundamentally different endpoint than Figma or Sketch, both of which require exporting or handing off to a developer to become a real live site.
Do interactions and animations set in Framer transfer if I export the design to another tool?
No — Framer's interactive components, animations, and code overrides are specific to Framer's own runtime and publishing system, so exporting static assets to another design tool would only carry over the visual appearance, not the interactive behavior, which only functions within Framer itself or on a site actually published from it.
Can someone update text on a live Framer site without editing the design file?
Yes, through the built-in CMS content panel, non-technical team members can update text and images on a published site directly, without needing design-file access or design skills, extending Framer's capability beyond what a pure design tool would need to support for an ongoing live website.
What are code components, and how are they different from regular design layers?
They're React components a developer writes and registers with Framer, after which the component shows up in the layers panel as an ordinary draggable, resizable element with its own configurable props exposed to whoever's designing — so a designer can drop in genuinely custom interactive behavior (a live chart, a payment widget, whatever the code does) without needing to touch a line of that code themselves.
Does duplicating a component instance create an independent copy, or a linked one?
Duplicating typically creates an independent instance that can be customized separately, while updates to the actual master component definition still propagate to all instances including duplicates, consistent with how component systems generally distinguish between instance-level overrides and master-level changes.
Does Framer support responsive design for different screen sizes automatically?
Yes, Framer's frame-based layout system includes breakpoint controls for adjusting a design across desktop, tablet, and mobile screen sizes, since a published site needs to render correctly across devices rather than only at one fixed canvas size the way a purely static design mockup might.
Is there a shortcut for previewing a Framer site's responsive breakpoints without publishing?
Yes — the breakpoint switcher in the canvas toolbar (no default keyboard shortcut) lets you preview how a page renders at different device widths directly within the editor, and Framer's live preview link (Cmd+Shift+Return typically) opens a real-time interactive preview in the browser without requiring a full publish first.