The Hand Tool in Figma is a navigation tool used to pan or move the visible canvas viewport without changing the actual position of design objects. It is especially useful when working on large websites, mobile applications, dashboards, wireframes, prototypes, design systems, component libraries, illustrations, and complex UI/UX projects.
When a Figma file contains many frames, components, layers, assets, and design sections, navigating the canvas efficiently becomes important. The Hand Tool allows designers to move the visible workspace horizontally, vertically, or diagonally while keeping the design elements in their original positions.
The Hand Tool is primarily a canvas navigation tool rather than an object-editing tool. It helps designers inspect different areas of a Figma file, move between distant frames, work comfortably at high zoom levels, and review large projects without accidentally repositioning design objects.
For structured Figma and UI/UX learning, visit JustAcademy Figma Training and explore the course through Register for Figma Course Demo.
The Hand Tool is a navigation tool used to pan the visible Figma canvas. Panning means changing which portion of the canvas is currently visible without changing the actual position, size, rotation, or structure of the design objects.
For example, if a Figma file contains ten mobile screens arranged across a large canvas, the Hand Tool can be used to navigate from the first screen to the tenth screen without moving any of those screens.
Figma Canvas
↓
Activate Hand Tool
↓
Click and Drag Canvas
↓
Viewport Moves
↓
Design Objects Remain Unchanged
Professional Figma files can become very large. A single project may contain dozens or hundreds of frames, reusable components, design-system resources, illustrations, assets, annotations, and prototype screens.
Without efficient canvas navigation, moving through such a workspace can become slow and inconvenient. The Hand Tool provides a simple way to navigate across the canvas while keeping the design itself unchanged.
The keyboard shortcut for the Hand Tool is H. Figma also allows temporary canvas panning by holding the Spacebar while dragging the canvas.
| Action | Shortcut | Purpose |
|---|---|---|
| Hand Tool | H | Activate the Hand Tool |
| Temporary Hand Tool | Spacebar + Drag | Temporarily pan the canvas |
| Move Tool | V | Select and move objects |
| Zoom Tool | Z | Work with canvas zoom |
The H shortcut is useful when you want to switch directly to the Hand Tool. Holding the Spacebar is particularly convenient when you are editing with another tool and only need to pan the canvas temporarily.
The Hand Tool is available in the Figma workspace toolbar and can also be activated using its keyboard shortcut.
Figma Workspace
↓
Toolbar
↓
Hand Tool
↓
Press H
↓
Click and Drag Canvas
↓
Canvas View Moves
One of the most important concepts to understand is the difference between panning the canvas and moving a design object.
The Hand Tool changes the viewport. The Move Tool changes the actual position of a selected object.
| Feature | Hand Tool | Move Tool |
|---|---|---|
| Main Purpose | Navigate the canvas | Move design objects |
| Shortcut | H | V |
| Changes Object Position | No | Yes |
| Changes Viewport | Yes | No |
| Used For | Canvas navigation | Object positioning |
| Useful on Large Canvas | Yes | Yes |
Canvas panning means changing the visible portion of the workspace. The design objects remain in their original locations, but the viewport moves so that another area of the canvas becomes visible.
Large Canvas
┌──────────────────────────────────────┐
│ Screen 1 Screen 2 Screen 3 │
│ │
│ Screen 4 Screen 5 Screen 6 │
│ │
│ Components Icons Assets │
└──────────────────────────────────────┘
↓
Hand Tool + Drag
↓
Different Canvas Area
↓
Same Objects, New View
Horizontal panning allows the designer to navigate toward different areas on the left or right side of the canvas. This is useful when frames are arranged in a horizontal sequence.
Before:
[Screen 1] [Screen 2] [Screen 3]
Pan to Another Area
↓
[Screen 2] [Screen 3] [Screen 4]
The objects themselves do not move.
Only the visible viewport changes.
Vertical panning allows the designer to navigate toward different areas above or below the current viewport. It is useful when design sections are arranged in rows or columns.
Before:
[Frame 1]
[Frame 2]
[Frame 3]
Pan to Another Area
↓
[Frame 2]
[Frame 3]
[Frame 4]
The Hand Tool can be used to navigate the canvas in multiple directions. By dragging the canvas, the designer can reach the required portion of the workspace.
Up
↑
|
Left ← Canvas → Right
|
↓
Down
Diagonal navigation is also possible when the designer needs to move toward an area that is both horizontally and vertically distant.
Holding the Spacebar provides a convenient way to temporarily pan the canvas while another tool remains active. This is one of the most useful navigation techniques for everyday Figma work.
Current Tool
↓
Hold Spacebar
↓
Temporary Canvas Panning
↓
Drag Canvas
↓
Release Spacebar
↓
Continue With Previous Tool
Suppose you are editing text with the Text Tool and need to move to another part of the canvas. Instead of permanently switching tools, hold the Spacebar and drag the canvas. After releasing the Spacebar, you can continue editing text.
Large design projects may contain many screens, components, illustrations, assets, and documentation areas. The Hand Tool makes it easier to navigate these large workspaces.
The Hand Tool works particularly well with zoom. Zoom changes the viewing scale, while panning changes which part of the canvas is visible at that scale.
Zoom In
↓
Detailed Area
↓
Hand Tool
↓
Pan Around
↓
Inspect Different Details
| Tool or Action | Function |
|---|---|
| Hand Tool | Changes the visible canvas position |
| Zoom | Changes the viewing scale |
| Move Tool | Moves selected objects |
At high zoom levels, only a small portion of the design may be visible. The Hand Tool allows the designer to move around that detailed area without changing the actual design.
High Zoom
┌──────────────────────┐
│ Detailed UI Area │
│ │
│ Button │
│ Text │
│ Icon │
└──────────────────────┘
↓
Hand Tool
↓
Move Viewport
↓
Inspect Another Area
The Hand Tool is useful throughout the UI/UX design process. Designers frequently move between wireframes, high-fidelity screens, components, prototypes, design systems, and supporting assets.
Website projects often contain multiple pages and responsive layouts. The Hand Tool allows designers to move between different screens arranged across the Figma canvas.
Website Project
↓
Home Page
↓
About Page
↓
Services Page
↓
Pricing Page
↓
Blog Page
↓
Contact Page
↓
Use Hand Tool to Navigate
Mobile applications can contain dozens of screens representing different user flows. Designers can arrange these screens across the canvas and use the Hand Tool to navigate between them.
Mobile App
┌───────┐ ┌───────┐ ┌───────┐
│ Login │ │ Home │ │ Search│
└───────┘ └───────┘ └───────┘
↓
Hand Tool
↓
Navigate Across Screens
Design systems can contain typography, colors, buttons, inputs, cards, navigation components, icons, modals, and documentation. The Hand Tool helps designers navigate between these sections efficiently.
Design System
↓
Colors
↓
Typography
↓
Buttons
↓
Inputs
↓
Cards
↓
Navigation
↓
Icons
↓
Use Hand Tool to Navigate
The Hand Tool can be used to navigate between frames without changing their position, dimensions, or structure.
| Action | Effect |
|---|---|
| Hand Tool + Drag | Changes viewport position |
| Move Tool + Drag Frame | Moves the frame |
| Resize Frame | Changes frame dimensions |
| Zoom | Changes viewing scale |
The Hand Tool is useful when you want to navigate without selecting individual design objects. This helps separate navigation tasks from object-editing tasks.
Need to Navigate
↓
Activate Hand Tool
↓
Drag Canvas
↓
Objects Stay in Position
↓
Continue Designing
When working on complex designs, accidental object movement can occur if a designer drags directly on a selected object while using a selection or movement tool. Using the Hand Tool or temporary Spacebar panning is useful when the goal is simply to navigate.
Suppose a dashboard contains many overlapping cards and controls. Instead of dragging across the workspace with a selection tool, use the Spacebar and drag to pan the canvas.
Open Figma File
↓
Identify Required Area
↓
Zoom to Appropriate Level
↓
Activate Hand Tool
↓
Pan Canvas
↓
Locate Required Frame
↓
Select Required Object
↓
Edit Design
↓
Use Hand Tool Again When Needed
| Feature | Hand Tool | Zoom |
|---|---|---|
| Main Purpose | Pan the canvas | Change viewing scale |
| Changes Canvas Position | Yes | May change the visible area depending on the zoom interaction |
| Changes Scale | No | Yes |
| Moves Objects | No | No |
| Common Use | Canvas navigation | Overview or detailed inspection |
| Feature | Hand Tool | Move Tool |
|---|---|---|
| Shortcut | H | V |
| Purpose | Pan canvas | Move objects |
| Moves Viewport | Yes | No |
| Moves Selected Layer | No | Yes |
| Used for Navigation | Yes | Not primarily |
| Used for Layout Positioning | No | Yes |
| Feature | Hand Tool | Frame Tool |
|---|---|---|
| Main Purpose | Navigate canvas | Create frames |
| Shortcut | H | F |
| Creates Design Object | No | Yes |
| Changes Viewport | Yes | No |
| Common Use | Canvas navigation | Screens and layouts |
During prototype creation and review, designers may need to locate multiple screens and supporting design areas on the canvas. The Hand Tool helps with canvas navigation during this process.
Prototype Project
↓
Screen 1
↓
Screen 2
↓
Screen 3
↓
Screen 4
↓
Hand Tool
↓
Navigate Between Design Areas
The Hand Tool should not be confused with prototype interaction navigation. It moves around the design workspace; it does not define or change prototype connections.
During design reviews, designers may need to inspect several screens, components, annotations, and layouts. The Hand Tool makes it easier to navigate between those areas without changing their positions.
When presenting a large design file, the Hand Tool can help the designer navigate across different sections of the canvas and show supporting screens or components.
Presentation
↓
Show Overview
↓
Zoom Into Screen
↓
Pan to Component
↓
Show Another Screen
↓
Return to Overview
A well-organized Figma canvas makes navigation easier. Frames and design sections should be arranged logically and named clearly so that designers can quickly locate the required area.
Project
├── Wireframes
├── Desktop Screens
├── Mobile Screens
├── Components
├── Design System
├── Prototypes
├── Assets
└── Archive
Good canvas organization combined with efficient panning makes large Figma files easier to navigate and maintain.
Large UI/UX Canvas
┌─────────────────────────────────────────────┐
│ Wireframes Desktop Screens │
│ │
│ Mobile Screens Components │
│ │
│ Design System Prototypes │
│ │
│ Assets Documentation │
└─────────────────────────────────────────────┘
↓
Hand Tool + Drag
↓
Navigate the Canvas
Suppose a website project contains Home, About, Services, Pricing, Blog, and Contact pages arranged across a large canvas.
Mobile App Screens
[Login] → [Home] → [Search] → [Product]
↓
[Checkout]
↓
[Success]
Use Hand Tool
↓
Navigate Between Screens
↓
Inspect UI
The Hand Tool allows the designer to move around the canvas while the mobile screens remain in their original positions.
Dashboard Project
┌──────────────┐
│ Dashboard │
├──────────────┤
│ Revenue │
│ Orders │
│ Users │
│ Analytics │
└──────────────┘
↓
Use Hand Tool
↓
Navigate to
Analytics Section
A component library may contain buttons, inputs, dropdowns, cards, tabs, badges, navigation components, and modal components. The Hand Tool can be used to navigate between these sections.
Component Library
↓
Buttons
↓
Inputs
↓
Cards
↓
Tabs
↓
Modals
↓
Navigation
↓
Hand Tool for Navigation
Responsive projects often contain desktop, tablet, and mobile layouts. The Hand Tool makes it easier to navigate between these layouts while reviewing their structure and visual differences.
Responsive Project
Desktop
↓
Tablet
↓
Mobile
↓
Use Hand Tool
↓
Compare Layouts
Wireframe projects may contain many screens representing different user flows. The Hand Tool helps designers move between these wireframes quickly.
Wireframe Flow
↓
Login
↓
Home
↓
Search
↓
Details
↓
Checkout
↓
Confirmation
The Hand Tool does not edit component properties or component content. It helps the designer navigate to the area where components are located.
| Task | Recommended Action |
|---|---|
| Navigate to component | Hand Tool |
| Select component | Move Tool |
| Edit component properties | Selection and properties controls |
| Move component | Move Tool |
| Inspect component closely | Zoom and Hand Tool |
Keyboard shortcuts can make Figma navigation faster. Instead of repeatedly selecting navigation controls from the toolbar, designers can press H or hold Spacebar while dragging.
Need to Pan
↓
Press H
OR
Hold Spacebar
↓
Drag Canvas
↓
Release
↓
Continue Designing
The Hand Tool is primarily used through a click-and-drag interaction. A mouse can be used to move the viewport after activating the Hand Tool.
Move Pointer
↓
Activate Hand Tool
↓
Press Mouse Button
↓
Drag
↓
Move Canvas View
↓
Release Mouse Button
Designers using a laptop trackpad can combine Figma's navigation controls with trackpad gestures. Exact gesture behavior can vary depending on the operating system, device, and input settings.
For efficient design work, it is useful to become comfortable with both device-based navigation and keyboard-based temporary Spacebar panning.
When inspecting a small UI element such as an icon, button, form field, card, or text block, designers may zoom in significantly. The Hand Tool can then be used to move around the detailed area.
Zoom In
↓
Inspect Button
↓
Pan With Hand Tool
↓
Inspect Icon
↓
Pan to Text
↓
Inspect Typography
Design inspection often requires moving across different areas of a screen or canvas. The Hand Tool provides a convenient way to navigate without intentionally repositioning design objects.
During collaborative design sessions, team members may need to inspect different parts of the same Figma file. The Hand Tool helps users navigate to the relevant area of the shared canvas.
Team Review
↓
Open Shared File
↓
Locate Required Section
↓
Use Hand Tool
↓
Inspect Design
↓
Discuss Changes
Prepare Design
↓
Zoom to Overview
↓
Present Main Screen
↓
Pan to Supporting Screen
↓
Zoom In
↓
Explain Details
↓
Pan to Next Section
↓
Continue Presentation
Open Figma File
↓
Understand Canvas Structure
↓
Zoom Out for Overview
↓
Identify Required Area
↓
Activate Hand Tool
↓
Pan to Required Section
↓
Zoom In
↓
Inspect or Edit Design
↓
Use Spacebar for Temporary Panning
↓
Navigate to Next Area
↓
Zoom Out When Necessary
↓
Continue Design Work
Beginners can practice the Hand Tool by creating a large Figma file containing multiple frames and navigating through them.
Create a Figma file containing Login, Home, Search, Product Details, Cart, Checkout, and Success screens. Arrange them across a large canvas and practice navigating between them using the Hand Tool.
Mobile App Project
↓
Login Screen
↓
Home Screen
↓
Search Screen
↓
Product Screen
↓
Cart Screen
↓
Checkout Screen
↓
Success Screen
↓
Navigate Using Hand Tool
| Organization Area | Example |
|---|---|
| Wireframes | Low-fidelity screens |
| Desktop | Desktop UI screens |
| Mobile | Mobile UI screens |
| Components | Reusable components |
| Design System | Colors, typography, components |
| Prototype | User flows |
| Assets | Images, icons, and supporting resources |
Efficient navigation is an important part of professional Figma work. Designers frequently switch between editing and navigation tasks. Using the Hand Tool and temporary Spacebar panning reduces unnecessary toolbar interaction.
Design
↓
Edit
↓
Need Navigation
↓
Hold Spacebar
↓
Pan
↓
Release Spacebar
↓
Continue Editing
Design System
Typography
──────────
Colors
──────
Buttons
───────
Inputs
──────
Cards
─────
Navigation
──────────
Modals
──────
Icons
─────
↓
Use Hand Tool
↓
Navigate Between Sections
| Method | Purpose | Best Use |
|---|---|---|
| Hand Tool | Pan canvas | General canvas navigation |
| Spacebar + Drag | Temporary panning | Fast workflow navigation |
| Zoom | Change viewing scale | Detailed inspection or overview |
| Move Tool | Move objects | Layout editing |
When reviewing responsive UI designs, designers can navigate between desktop, tablet, and mobile frames using the Hand Tool and then zoom into individual layouts for detailed comparison.
Desktop Frame
↓
Pan With Hand Tool
↓
Tablet Frame
↓
Pan With Hand Tool
↓
Mobile Frame
↓
Zoom In
↓
Compare Responsive Layout
The Hand Tool itself does not modify accessibility properties. However, it can be useful while navigating through different interface sections during an accessibility-oriented design review.
The Hand Tool is a navigation tool used to pan the visible Figma canvas without changing the position of design objects.
The keyboard shortcut for the Hand Tool is H.
No. The Hand Tool changes the visible canvas viewport rather than repositioning design objects.
Hold the Spacebar and drag the canvas to temporarily pan the workspace.
The Hand Tool navigates the canvas, while the Move Tool is used to select and reposition design objects.
It allows designers to navigate efficiently between distant frames, components, screens, assets, and other design areas.
No. It changes the visible viewport while leaving design objects in their existing locations.
Spacebar panning allows designers to temporarily navigate the canvas without permanently switching away from their current design tool.
Zoom changes the viewing scale, while the Hand Tool changes which portion of the canvas is visible at that scale.
It is useful for websites, mobile applications, dashboards, design systems, prototypes, wireframes, component libraries, illustrations, and large design files.
Yes. It can help navigate between different areas of a design while presenting a project.
Yes. It allows designers to navigate to different areas of a file without intentionally repositioning objects.
The visible viewport changes in response to the drag while the design objects remain in their original positions.
No. It is primarily a canvas navigation tool.
Efficient canvas navigation saves time and makes it easier to work with large and complex Figma projects.
Open Figma File
↓
Review Canvas Overview
↓
Zoom Out
↓
Identify Required Area
↓
Press H
↓
Pan Canvas
↓
Locate Frame
↓
Zoom In
↓
Inspect Design
↓
Edit Required Object
↓
Hold Spacebar
↓
Pan to Next Area
↓
Continue Designing
Level 1
Understand Canvas Navigation
↓
Level 2
Learn H Shortcut
↓
Level 3
Practice Basic Panning
↓
Level 4
Practice Spacebar Panning
↓
Level 5
Combine Panning and Zoom
↓
Level 6
Navigate Multiple Frames
↓
Level 7
Navigate Large Projects
↓
Level 8
Use Efficient Professional Workflow
Create a complete Figma workspace containing a website project, mobile application screens, a component library, and a small design system. Arrange the content into separate canvas sections and practice navigating between them using the Hand Tool.
Figma Project
├── Website
│ ├── Home
│ ├── About
│ ├── Services
│ └── Contact
├── Mobile App
│ ├── Login
│ ├── Home
│ ├── Product
│ └── Checkout
├── Components
│ ├── Buttons
│ ├── Inputs
│ └── Cards
└── Design System
├── Colors
├── Typography
└── Icons
Use the Hand Tool to move between every section, combine it with zoom controls, and practice temporary Spacebar panning while editing individual elements.
These concepts are related but should not be treated as exactly the same. The Hand Tool is specifically a canvas navigation method. Panning means changing the visible area of the canvas, while scrolling can refer more generally to moving through a scrollable interface or workspace.
| Concept | Meaning | Purpose |
|---|---|---|
| Hand Tool | Figma navigation tool | Pan the canvas |
| Panning | Changing the visible canvas area | Navigate around the workspace |
| Scrolling | Moving through a scrollable area | Navigate content or workspace depending on context |
| Zooming | Changing viewing scale | View more or less detail |
Figma provides a flexible canvas where designers can arrange many design elements and frames across a large workspace. As the workspace grows, efficient navigation becomes increasingly important.
Large Workspace
↓
Many Frames
↓
Many Components
↓
Many Assets
↓
Large Canvas Area
↓
Hand Tool
↓
Efficient Navigation
The Hand Tool is therefore particularly useful when the visible design area represents only a small portion of the complete project.
The Hand Tool is not limited to UI/UX screens. It can also be useful when working on large illustrations, branding layouts, posters, diagrams, social-media designs, presentation graphics, and other creative projects.
Detailed editing often requires repeated movement between nearby or distant portions of the canvas. Temporary Spacebar panning can make this workflow smoother because the designer can navigate and then immediately continue editing with the previous tool.
Select Design Tool
↓
Edit Object
↓
Need to Navigate
↓
Hold Spacebar
↓
Pan Canvas
↓
Release Spacebar
↓
Continue Editing
| Situation | Useful Action |
|---|---|
| Need to move around canvas | Use Hand Tool |
| Need quick temporary navigation | Hold Spacebar and drag |
| Need more detail | Zoom in |
| Need overall overview | Zoom out |
| Need to move an object | Use Move Tool |
| Need to inspect another frame | Pan and zoom |
| Need to review a large project | Combine organization, zoom, and panning |
The Hand Tool is a fundamental navigation tool in Figma that allows designers to move around the canvas without changing the position of design objects. It becomes increasingly valuable as projects grow larger and contain multiple screens, components, assets, illustrations, and design-system resources.
The H shortcut provides direct access to the Hand Tool, while holding the Spacebar allows quick temporary canvas panning during normal design work. Combining these techniques with appropriate zoom levels can make canvas navigation faster and more comfortable.
To use the Hand Tool professionally, designers should understand the difference between viewport movement and object movement, practice navigating large canvases, combine panning with zooming, organize frames logically, and use keyboard shortcuts efficiently.
For structured Figma and UI/UX learning, visit JustAcademy Figma Training and register for a course demonstration through Register for Figma Course Demo.
