Getting Started
Navigating the Canvas
The Framer canvas is your main workspace. It's where you'll see your entire website laid out visually. Getting comfortable navigating it makes editing much faster and more enjoyable.
The Main Interface Areas
Top Bar
The toolbar at the top contains your tools: select (V), frame (F), text (T), and more. It also has the Undo/Redo buttons, Preview button, and the Publish button on the right.
Left Panel — Layers & Pages
The left sidebar shows your Pages (top section) and your Layers (below). Layers are how Framer organizes every element on your canvas in a hierarchy.
Right Panel — Properties
When you select any element, the right panel shows its properties: size, position, color, typography, effects, and more.
Navigating the Canvas
Zoom in/out — Use Cmd/Ctrl + scroll or pinch on a trackpad. Press Cmd + 0 to fit everything in view.
Pan around — Hold Space and drag, or use two fingers on a trackpad.
Select elements — Click any element to select it. Use Cmd+click to select inside a group or stack.
Navigate pages — Click the page names in the left panel to switch between pages of your site.
💡 Tip: Press Cmd + to hide all panels and get a clean view of just your canvas. Press it again to bring the panels back.
Useful Keyboard Shortcuts
Learning a few shortcuts will seriously speed up your workflow:
V — Switch to the Select tool
T — Switch to the Text tool (click anywhere to add text)
Cmd/Ctrl + Z — Undo your last action
Cmd/Ctrl + D — Duplicate a selected element
Cmd/Ctrl + G — Group selected elements
Related to Getting Started