Get Started
Jul 8, 2025
Framer Canvas Guide: Basic Tools and Tips
With Framer's canvas controls, you can use pan and zoom features and learn shortcuts for efficient design work. Discover how to manipulate the canvas and create an optimal work environment to boost productivity.
Uploaded by
Translated by
Contents
Table of Contents
This document is intended to help domestic users learning Framer overcome the difficulties caused by the lack of Korean resources by translating content from the official blog into Korean and adding practical information. We hope this will be somewhat helpful to those of you using Framer.
Canvas Control Basic Structure
The canvas manipulation tools are located on the bottom bar of Framer.
Pointer Tool: Used to select or modify individual elements
Hand Tool: Used to drag the screen to move
Comment Tool: For leaving notes on your work
Light/Dark Mode Toggle Button
Zoom Level Menu: Displays the current zoom ratio and zoom in/out options
How to Move the Canvas with Pan
Method 1: Select the Hand Tool
Select the Hand Tool (the palm icon) from the bottom toolbar to switch to pan mode (Shortcut: H), and in pan mode, click and drag with the mouse to move the entire screen.
Method 2: Use the Spacebar
To use the pan function while designing, hold down the spacebar while dragging the mouse. It's much faster with the shortcut.
Method 3: Using a Trackpad
If you're using a trackpad, you can pan by dragging or scrolling with two fingers.Note: If you often move while working, getting familiar with the hand tool shortcuts and using the trackpad can boost productivity.
Zoom: Screen Magnification
How to Adjust Zoom
Click the
Zoom Dropdown Menuon the bottom bar, then select the desired ratioUse keyboard shortcuts
Mac:
⌘,+→ Zoom in /⌘,-→ Zoom out, Windows:CTRL +→ Zoom in /CTRL -→ Zoom out
Each shortcut press changes the zoom level in multiplier increments (e.g., 100% → 200%).
Other Zoom Options
Item | Description |
|---|---|
Zoom In | Zooms in one step on the canvas. Also available with |
Zoom Out | Zooms out one step on the canvas. Also available with |
Zoom to 100% | Displays the canvas at actual pixel size (100%). |
Zoom to Fit | Automatically adjusts to fit all content in view at once. |
Zoom to Selection | Automatically adjusts so the selected object fits perfectly in view. |
Fast Zoom | Enables a mode that enhances zoom performance for faster magnification. |
Nudge Amount | Sets the movement increment when using arrow keys to move elements. |
Note: If you frequently work on precise tasks, the Zoom to Selection feature, which centers the screen on the selected object, is particularly useful.
Trackpad and Mouse Zoom Controls
Trackpad: Pinch with two fingers to zoom in or out
Mouse: Hold
⌘ Command (Mac)orCtrl (Windows)while scrolling
This article is an adaptation and translation of Framer's official blog post ‘Using the canvas’.
