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 designed to help Korean users who are learning Framer address the challenges posed by a lack of Korean-language resources. We have translated the content from the official blog into Korean and added practical information. We hope this is of some assistance to you using Framer.
Basic Structure of Canvas Controls
Canvas control tools are located on the lower bar in Framer.
Pointer Tool: Used for selecting or modifying individual elements
Hand Tool: Used for dragging and moving the screen
Comment Tool: For leaving annotations on your work
Light/Dark Mode Toggle Button
Zoom Level Menu: Displays current zoom percentage and zoom options
How to Move the Canvas with Pan
Method 1: Select the Hand Tool
Select the hand icon (Hand Tool) as the move tool from the bottom toolbar (Shortcut:H) to switch to pan mode. In pan mode, clicking and dragging with the mouse moves the entire screen.
Method 2: Use the Spacebar
To use the pan feature during design, press and hold the spacebar while dragging the mouse. This shortcut method is much faster.
Method 3: Use the Trackpad
If you're using a trackpad, you can pan by dragging or scrolling with two fingers.Note: If you frequently move while working, mastering the pan tool shortcuts and using the trackpad can boost productivity.
Zoom: Enlarge/Reduce the Screen
How to Adjust Zoom
Click the
zoom dropdown menuon the bottom bar and select your preferred ratioUse keyboard shortcuts
Mac:
⌘,+to zoom in /⌘,-to zoom out, Windows:CTRL +to zoom in /CTRL -to zoom out
Each shortcut press changes the zoom level in multiples. (e.g., 100% → 200%)
Other Zoom Options
Item | Description |
|---|---|
Zoom In | Zooms the canvas in one step. It can also be done using the |
Zoom Out | Zooms the canvas out one step. It can also be done using the |
Zoom to 100% | Displays the canvas at actual pixel size (100%). |
Zoom to Fit | Automatically adjusts so that all content you're working on fits perfectly on one screen. |
Zoom to Selection | Automatically adjusts so that the selected object fits perfectly on one screen. |
Fast Zoom | Activates a mode for enhanced zoom performance allowing quicker zoom in/out. |
Nudge Amount | Sets the distance an element moves when using arrow keys. |
Note: For precise work, the Zoom to Selection feature, which adjusts the screen centered on the selected object, is particularly useful.
Trackpad and Mouse Zoom Control
Trackpad: Pinch out or in with two fingers
Mouse: Hold
⌘ Command (Mac)orCtrl (Windows)and scroll
This article is an adaptation and translation of the Framer official blog’s ‘Using the canvas’ content.
