Panning around the canvas & zooming
As we mentioned in the previous chapter, in Adobe XD you can design entire apps and/or websites within the same .xd file, so it’s really important that you learn how to quickly navigate through all of your artboards located on your canvas.
To do it efficiently, you need to get familiar with panning around the screen and zooming in and out.
Panning around
To pan around, you can just use the trackpad if you are on a Mac laptop, or you can hold down the spacebar on your keyboard (you will see the mouse cursor turn into a little hand), click on your canvas and drag. Pretty much the same concept as panning around Google Maps.
Zooming
When it comes to zooming, there are a few ways to do that.
• You can activate the zoom tool from the left toolbar or by using the Z key.
Once the zoom tool is active, you will see the mouse cursor turn into a little magnifier with a “+” in it. Now you can zoom in by clicking anywhere on the canvas. Or you can marquee-select an area to zoom in (really useful when you need a detailed view on any part of your design, a button or an icon for example.)
To zoom out, just hold down the ALT key (the magnifier will have a “-” in it) and click anywhere on the canvas.
• You can also zoom in and out without even having to activate the zoom tool: just hold the ALT key and use the scroll wheel on your mouse. Very practical.
• There are also some very useful shortcuts which will quickly set your canvas to the most common zoom levels:
Zoom to Fit All : CMD + 0 (Mac) & CTRL + 0 (Win)
Zoom to 100% : CMD + 1 (Mac) & CTRL + 1 (Win)
Zoom to 200% : CMD + 2 (Mac) & CTRL + 2 (Win)
Zoom to Selection : CMD + 3 (Mac) & CTRL + 3 (Win)
You can check the current zoom level by looking at the Zoom dropdown in the top right. The maximum zoom level is 6400%, the minimum is 2.5%.
