Arranging Design Elements9:49 with Nick Pettit
Using smart guides, Figma makes it easy to arrange objects on the canvas.
Now that we've pasted this phone into our file, 0:00 we need to match our content to the phone. 0:04 We want to resize our photos, and we do not want to resize the phone at all. 0:07 That's because the phone is already at the correct pixel 0:15 resolution of the real device, so we want to maintain that. 0:19 So select the photos, And 0:23 then in the layer palette, right click on the selection, 0:28 to bring up the context menu, and choose Group Selection. 0:33 Alternatively, you can do this by creating a selection and 0:40 then hitting Ctrl + G on Windows or Cmd + G on Mac. 0:46 Then name the group by double-clicking on its name, 0:51 and we'll type in Photos and hit Enter. 0:56 Finally, click and drag this group in the layers palette, 1:01 and move it so that it's above the phone. 1:06 That way, when we move it around in the canvas, 1:11 it will appear on top of the phone whereas, 1:15 if it's below it the phone will appear in front of it, so let's move that back. 1:18 Now with this group selected, we can hold down Shift and 1:25 resize these, and start moving this into place. 1:31 So let's hit Z and drag a box around this to zoom into this area, 1:36 get a little closer here, there we go. 1:41 And we want to align these with the actual screen, 1:45 which is about four pixels in from the white edge. 1:50 So, if I actually zoom in really close here. 1:55 You can see that there is a screen here, but 2:01 there' s one, two, three, four pixels 2:06 between the actual display and the white edge. 2:10 So we wanna move these photos so that they're perfectly on top of the screen. 2:16 And we're four pixels in on the top and left side, and then we need to 2:23 resize this group of photos so that it's the same on all four sides. 2:27 So, we'll just pan over to the right here, and 2:34 I'm doing this by just scrolling on my track pad. 2:38 Again, you can hold down the space bar and click and drag if you prefer that. 2:41 And you'll notice that I am actually a little away from the right side. 2:49 So I'm going to hit 1 to zoom back out. 2:55 I'll hold down Z to zoom back into the bottom right corner here. 2:59 There we go. 3:07 And we actually need to make this a little bit bigger, so that it hits this corner. 3:10 And it should snap to the screen, there we go. 3:19 Now we've got that perfect four pixels on the right side, And on the left side. 3:24 But now these images are kind of spilling off of the screen. 3:33 So let's kinda move them so that they, Are where we want them to be. 3:37 So let's zoom in and again, 3:45 to select something that is inside of a group, simply double click. 3:48 I'll hold down the shift key, and 3:53 also click the picture of London there and that will select both of these. 3:55 Let's just move these up a bit, And 4:01 let's try to maintain that 4 pixel distance. 4:06 So there is one two three four, and 4:12 you can see that there is kind of a half pixel there, and sometimes this will 4:14 occur when you are working with Bitmap images and other objects in Figma. 4:20 So let's just hold down Shift and resize this upper photo. 4:25 And we might not be able to get it perfect, but 4:31 now it's aligned to the pixel grid. 4:33 And it should be the same on the other side that's good, and 4:38 now we'll just click this photo here. 4:42 Zoom out a little bit, And also select this photo so 4:45 we have these two photos selected. 4:49 Zoom back in, And we'll just move these up by pixel. 4:52 So now we have that perfect four pixel distance. 4:57 So let's zoom back out, and 5:04 now we kinda have this large gap between these two photos. 5:05 So I'm going to make this photo a little larger, make this photo a little larger. 5:10 Now they're touching one another, But 5:17 we can resize them by one, Two and 5:24 then one, Two, and now we have a little 5:30 bit of a gap between them, there we go. 5:34 So let's just move this image of the Golden Gate Bridge up into place, 5:40 and as we get it closer and closer to these two images. 5:45 You can see that it kinda snaps into place and 5:50 tiny little number fours appear in red, and 5:54 that number four means it's four pixels away from those two images. 5:57 So there's one between bottom and the top, and 6:02 that's telling us that it is equidistant. 6:06 So it's that same four-pixel distance that we want. 6:10 So we just release, now we have the exact same distance here 6:15 as we have here, and it looks a lot nicer. 6:22 And these borders look very intentional. 6:28 Now we still have the issue of this 6:31 image hanging over the bottom edge of the screen. 6:34 We can fix that using what's called a mask. 6:37 In the Layers Palette, Drag the photos group so 6:41 that it's inside of the iPhone group, 6:48 And make sure it's at the top of this group above everything else. 6:55 Then right click on the Screen layer just below it, 7:01 and choose Use as Mask. 7:07 Now, everything above this mask 7:10 layer will be clipped at the edges. 7:15 Now let's duplicate this Screen layer by having the Screen 7:23 layer selected, and just copying and then pasting. 7:28 And on this one that's below, right-click on it again, 7:35 And again, choose Use as Mask and 7:42 this will change that duplicate layer back to a normal layer, 7:45 which will give us a background for the photos. 7:51 Otherwise, it's just going straight through to the canvas background. 7:56 Finally let's change the naming of some of these groups. 8:00 This top grouping should be renamed so that it's the title of this 8:04 particular screen in our application, which is just a gallery. 8:09 So we'll double click this and just type Gallery and 8:13 hit Enter Then lets 8:18 group all of these iPhone layers together So everything below photos and 8:24 screen, Just right click and choose Group Selection, 8:31 And we'll rename this, iPhone. 8:37 And that way we know, what's the phone, and what's kind of our application, 8:42 and then what the name of this entire screen is within the application. 8:48 Finally, let's group the Photos layer and the Screen layer together. 8:54 And I'll do this using the hotkey this time. 9:00 Again, on Windows that is Ctrl + G and on Mac this is Cmd + G. 9:03 And I'll double-click that to rename it, and let's call this App. 9:09 And now this is much better organized, we know exactly what the screen is, 9:15 what's our application, and what's just the phone, itself? 9:20 I made things a little easier on us by keeping the images that I 9:25 selected at just two aspect ratios. 9:29 But if you want to take things further, try bringing in images that 9:33 are all different sizes, and see if you can come up with a solution. 9:37 We have one screen of the app, but 9:41 next we'll create the remaining screens and then link them together. 9:44
You need to sign up for Treehouse in order to download course files.Sign up