Navigating the Canvas6:39 with Nick Pettit
Inside a Figma file, design objects are manipulated in a space called the canvas. In order to use Figma effectively, it's essential to understand how to navigate the canvas.
These images are going to become the first screen in our app, 0:00 which will be a simple image gallery of all the available photos. 0:04 Right now, these images are way too large, and they're overlapping one another. 0:09 Let's zoom out a bit, re-size them, and then rearrange them. 0:15 In the upper-right, we can adjust the zoom level. 0:21 Click the arrow next to the text that says 100%. 0:27 And choose Zoom to Fit. 0:32 Alternatively, you can press the plus and 0:36 minus buttons on your keyboard if you want to go in and out. 0:40 And if you want to Zoom to Fit at any time, you can also just press the 1 key. 0:46 You can also hold down control on Windows, or command on Mac, and 0:52 use the scroll wheel on your mouse or trackpad to zoom in and out. 0:57 Once you can see the images, click and drag in any blank area 1:05 to select them if they're not already selected. 1:11 And you can drag a selection box around them. 1:16 Then, hover over one of the corners until you see the arrows that are pointing 1:21 away from one another, in a diagonal. 1:26 And then click and drag. 1:29 Now, this will not keep the aspect ratio. 1:31 So in order to do that, we need to hold down 1:34 the shift key simultaneously, and then resize them. 1:38 That way, they won't get stretched or cropped in any way. 1:45 Once they're down to a more manageable size, 1:50 hit the 1 key again so that we Zoom to Fit. 1:53 And I am actually going to just zoom out a little bit so 1:59 that we have some room to work and rearrange these. 2:03 There we go. If you want to pan around the canvas at 2:07 any time, you can hold the space bar and 2:11 then click and drag to pan around. 2:16 Now, let's arrange these images into a nice grid. 2:22 I'm going to move these around so we can see all of them. 2:26 So let's just click one of these to select it. 2:29 And then you can click and drag to move it around. 2:33 So let's get all of these away from one another. 2:39 One of these images, the one with the crazy colors of London, 2:45 is an image we'll use later on in the edit view. 2:49 So let's just move that aside for now. 2:52 And as for the remaining four images, let's arrange these into a nice grid. 2:56 So I'm going to start with this colorful image of Disney World and 3:04 put it at the top. 3:09 And then two of these images Are kind of long ways. 3:12 They're in portrait view rather than landscape view. 3:17 So let's put these side by side. 3:21 And we'll drag to select them. 3:27 Move this image of the Golden Gate Bridge out of the way. 3:30 And let's select these two. 3:35 Hold down Shift and resize them so 3:37 that they're the same width as this mage of Disney World. 3:42 And you'll see these smart guides that kind of snap so 3:47 that we know that the left side is aligned. 3:51 And then we'll resize. 3:53 And there's the right side. 3:57 And then, we can put this image of San Francisco underneath. 3:59 And again, the smart guides will tell us when the distance between 4:03 these images is equidistant to a distance between the top two. 4:08 Great. So now, 4:14 let's pull in some of the phone elements from the Facebook file. 4:15 In the upper left, click the Menu, and choose Back to Files. 4:21 Then, go to Drafts. 4:29 Click the Menu icon on the Facebook file, which is just these three dots here. 4:32 And then choose Open in new tab. 4:41 Then, in the first tab here, go back to the photo app. 4:47 And open the Prototype file again. 4:55 And now, we have our two Figma files open. 5:00 So first, let's take a look at this Facebook file. 5:04 Here, there are lots of design elements from iOS 10. 5:08 Everything you'd need to create a High-Fidelity mock-up. 5:13 For now, we just need one of these phones on the left side. 5:16 If you hold down the Z button, and click and 5:23 drag a box around an area on the canvas, it will zoom into that area. 5:27 These phones are in various groups. 5:35 And while we only need one phone, we still want it's other elements, 5:38 like the screen and the subtle shadow that's below it. 5:43 Double-click on the phone that you would like to use. 5:48 I am going to use this one that's white with the silver finish. 5:52 So, I will just double-click it. 5:57 And double-clicking will select a sub element of this whole group. 6:01 So, now on the left side, you can see that we have this group of devices, 6:07 but double-clicking on this one in particular has selected this subgroup. 6:13 Now, let's copy that by hitting Ctrl+c Windows, or Cmd+c on Mac. 6:19 And then, over in our file, hit Ctrl+v 6:27 on Windows, or Cmd+v on Mac to paste it. 6:32
You need to sign up for Treehouse in order to download course files.Sign up