Efficient Canvas Navigation

Hello! Welcome back to the final lesson in our first module.

In our last session, you did an excellent job bringing structure to your design. You learned how to use alignment tools, guides, and layout grids to position your avatar and button with professional precision. Your first UI screen is now perfectly organized.

Now that you know where to put things, let's focus on how to get around your workspace. As your projects grow from a single screen to a full application with dozens of them, moving around the canvas quickly becomes one of the most important skills for an efficient workflow. Today's lesson is dedicated to helping you navigate the canvas efficiently using zoom, pan, and selection shortcuts.

If you've used digital illustration software before, the basic concepts of panning and zooming will feel familiar. We'll be focusing on Figma's specific shortcuts that will save you a huge amount of time.

Part 1: The Essentials - Panning and Zooming

Let's start with the two most fundamental navigation actions: moving your view across the canvas (panning) and changing your level of magnification (zooming).

Panning the Canvas

The most common way to pan in Figma, and most other design tools, is by using the Hand Tool.

To Pan: Press and hold the Spacebar. Your cursor will turn into a hand. Now, click and drag your mouse or trackpad to move the canvas around. Release the Spacebar to return to your previous tool.

This is your go-to method for moving your view short distances.

Mastering Zoom

Zooming is crucial for both getting a high-level overview and inspecting pixel-perfect details. Figma offers several ways to do this.

How to Zoom in Figma: Quick Tips for Precision

The article 'How to Zoom in Figma' provides a great summary of all the essential zoom methods. We'll use it as a guide for our practice.

Read the sections titled 'Step Three: How Do You Zoom Using Mouse and Trackpad Gestures?' and the FAQ questions about zooming to 100%, fitting the canvas, and zooming to a selection. These cover the most important shortcuts.

Now, let's put that into practice in your Figma file. Try each of these methods:

Gesture-Based Zoom: If you have a trackpad, use a two-finger pinch gesture to zoom in and out. If you have a mouse with a scroll wheel, hold Command (Mac) or Ctrl (Windows) and scroll the wheel up and down. Notice that Figma zooms in on the location of your cursor.
The "Big Three" Zoom Shortcuts: These are non-negotiable for a fast workflow. Memorize them, and you'll always know where you are.
- Zoom to Fit All (Shift + 1): This zooms out to show everything on your current page. It's the "I'm lost, give me the big picture" command.
- Zoom to Selection (Shift + 2): First, click on an object (like your avatar). Now press Shift + 2. Figma instantly centers and magnifies that object. This is perfect for focusing on a specific element.
- Zoom to 100% (Shift + 0): This sets the zoom level to 100%, showing you the design at its actual pixel size. This is essential for judging the true scale of text and graphics.

Spend a few minutes practicing these three shortcuts. Click your frame, press Shift + 2. Press Shift + 1. Press Shift + 0. Get a feel for how they instantly change your view.

Test your understanding!

You are zoomed in very close to your button, working on a tiny detail. You now want to see how the entire screen looks with your change. Which shortcut is the fastest way to do this?

Show answer

Shift + 1 (Zoom to Fit All). This will immediately zoom out so your entire mobile frame is visible in the viewport.

Part 2: Jumping Between Screens and Layers

As your designs become more complex, you'll have multiple screens (frames) and even multiple pages within a single file. Panning and zooming across a huge canvas can be slow. A faster way is to jump directly where you need to go.

The following video from Figma's education team demonstrates some powerful "jumping" techniques.

Figma for Edu: Shortcut workflows

Let's watch 'Figma for Edu: Shortcut workflows' to learn how to navigate between frames, pages, and layers instantly.

Watch from 06:59 to 11:51. Pay close attention to these three key workflows: Navigating Frames (06:59): Using N and Shift + N to cycle through frames. Navigating Pages (09:05): Using Page Up and Page Down. Zooming to an Object (10:44): Double-clicking on a layer in the Layers panel.

Time to try these out. Let's set up your file for practice:

Duplicate Your Frame: Select your mobile frame by clicking its name. Copy and paste it two times (Cmd/Ctrl + C, then Cmd/Ctrl + V twice). Drag them so they sit side-by-side on the canvas. You now have three identical screens.
Practice N / Shift + N: Click on the canvas background so nothing is selected. Press N. Figma will zoom to the next frame. Press N again. Now press Shift + N to go backward. This is incredibly useful for presenting a sequence of screens.
Create a New Page: In the Layers panel on the left, you'll see a "Page 1" tab. Click the + icon to add "Page 2".
Practice Page Navigation: Now use Page Down and Page Up to jump between your two pages. On some keyboards, you may need to use Fn + Down Arrow and Fn + Up Arrow.
Practice Jumping to Layers: Go back to Page 1. Zoom way out (Shift + 1). Now, in the Layers panel, find the ellipse layer for your avatar and double-click its icon. Figma will instantly zoom directly to that object. This is a lifesaver in complex files.

Part 3: Your Personal Shortcut Guide

You've learned the most critical navigation shortcuts, but there are many more. The best way to learn them is to have a reference handy. Figma has a built-in shortcut panel that you can access at any time.

Use Figma products with a keyboard

This official Figma help article shows you how to access a complete list of shortcuts without ever leaving your file.

Read the section 'Open the shortcuts panel'. The key is to learn the shortcut to open the shortcuts!

Go ahead and open the panel now: press Control + Shift + ? (Mac) or Ctrl + Shift + ? (Windows).

A panel will appear at the bottom of your screen. It shows you a huge list of shortcuts, and it even highlights the ones you've used. It's a fantastic tool for discovery. Feel free to explore it, but don't feel pressured to learn them all at once.

For a more visual summary, here is a handy "cheat sheet" of the most common navigation shortcuts we've discussed today.

Figma Shortcut Keys For Zooming — This infographic provides a quick visual reference for the most essential zoom and pan shortcuts in Figma.

Conclusion

That's a wrap on our first module! You've built your first UI screen from scratch, learned to position elements with precision, and now you can fly around the canvas like a pro.

Here are the key navigation takeaways:

Pan with Spacebar + drag.
Zoom with trackpad/mouse gestures or the + / - keys.
Master the "Big Three" view shortcuts: Shift + 1 (Fit), Shift + 2 (Selection), and Shift + 0 (100%).
Jump between frames with N / Shift + N and between pages with Page Up/Down.
Find anything by double-clicking it in the Layers panel.
Open the shortcut panel (Ctrl/Cmd + Shift + ?) anytime you're curious.

Building muscle memory for these shortcuts is one of the best investments you can make in your design speed.

In our next lesson, we'll kick off Module 2 by bringing your design to life. You'll learn how to add and format text for headings, labels, and buttons, turning those gray shapes into a recognizable interface.