Rectangles, Circles, Buttons and Rounded corners in Figma

Hey everyone, this video we're going to draw some rectangles, and some circles, and some rounded corners, very exciting, let's jump in. 

All right, let's first of all put in our kind of product shot, we're going to put in a placeholder image for that, I'm going to use my Selection tool, just click and drag over a bunch of them, and then I can drag it down, so I've got a bit of space. Let's grab the 'Rectangle' tool, it's one of those ones that you'll probably learn the shortcut for, and they're all hiding in here, see, rectangle, lines, all the kind of basic shapes. 

So as for the Rectangle tool, which makes sense, so I'm going to click, hold, and drag it out, and you get the big gray box, and you'll notice our text disappeared. So this brings us to layering, so over here, if you can't see it you might be on Assets, go to 'Layers', you'll see, there's my Homepage frame, and inside of that is all these different things, all the different texts we've added. 

Now we've got a rectangle, but it's on top, so we can do a couple of things, right click, say, 'Send to Back' please, and it's just that shortcut. You'll learn that one quite a bit as well. Learn the different shortcuts at your level, you might be ready for shortcuts, you might be not, you might be freaking out, so just right click and say, actually, 'Send to Back', or I want you to practice-- I've undone that, can you see here, I can drag this, kind of like, more like Photoshop, I'm holding it, holding it, dragging it. 

Now it's at the bottom of all those guys, and I can see it, easy, I'm going to undo it, and show you just one more painful way, mainly because there is a ton of ways of doing everything in Figma, and I'm going to show you the way that I think makes most sense for your level, and what's really common and useful, but if you find a different way, and you're like, "Hey, why didn't he show us that way, that's heaps better," if you find it, and you like it, you can do it, but let's say this one here, this little Figma menu here, if you're on a Mac you've got this top bit along the top here, which is exactly the same as Edit, where is it, 'Arrange", you can see how, no, I don't want to arrange, 'Object', there it is there, you can see how much I use this menu, not very often.

So you can, on a Mac you'll see these along the top, and they will correspond, see, File, there's File, Edit, there's Edit. So often I use these ones along the top here, but I know, if I'm using the browser version, these aren't there, on a PC, these aren't there, these are exactly the same. So I'll try to remember through this course, that I'm going to go to 'Object', 'Send to Back', but you might find in this course that, Dan's going up to arrange up the top here, and you're like, "Hey, I don't have that," there it is there, look. 

So I'm going to go 'Object', 'Send to Back', yeah, loads of ways of doing the same thing. Let's kind of get that in the middle there, you'll notice that a Figma is just, really naturally wanting to go to the center of things, center of boxes, center of artboards, you just drag it around, you don't have to do a lot, there are the full-on ranges along the top here, kind of, Arrange Center, Arrange to the Left, but often just dragging it around, does perfectly well. 

All right, let's do our buttons down the bottom here, so I'm going to zoom in, 'Command +', or 'Ctrl +' on a PC, and I'll hold my spacebar key down and click and drag. 'R' for the Rectangle tool, or just go up there, drag it around. We know that it is on top, you can drag it over here, what's the shortcut? It's a test, what's the shortcut to go all the way to the back? It's that square bracket, next to P on your keyboard, there it is, down, up, the other one, down, up, down. 

So I've got that button, I'm going to hold down my 'Option' key, and drag out another one. You might have to resize this, I want to move on to rounded corners, because when I say, "Do not, whatever you do, don't design this thing, it's hard because, you're like, "I want rounded corners", you're not bossing me, Dan." I'm going to make some little design choices, so with the Rectangle selected, you you might notice, these little dots, if you don't see these little dots, if I zoom right out, minus, ' - ', you see, they go away. 

So those little dots in the corners help with rounded corners, if you can't see them just keep zooming in, look, still can't see them, oh, are they there? Yeah, they're there. Zoom out, there's a level, look at that, they're not there, zoom one more in. I can grab them and drag them, and you're like, "Oh", there you go, nice round of corners. 

You can do it-- I'm going to go zoom all the way out to 100%. The shortcut is, where is that? So this is the long way, 100%, see this, Shift, that little arrow key is Shift, I was like, "What is that one?" Especially on a Mac, I'm like, "What the hang is that guy?" I have to look at my keyboard, luckily it's written on it, you think I'd know. So 'Shift 0' along the top there, goes to 100%, because that's probably a better place, to be designing around the corners, because you're like, "That's the way it's going to look." 

So if I'm doing it here, I can actually just do it here, in my kind of Property Inspector here, this right panel, I can say, actually, let's try it using my arrow keys, remember, the sweet shortcut, up one, oh, how does it look up another one, smashing it up, down. So I'm going to just put in somewhere across 5. It's handy because you can get consistency. Select this other one, go '5', click on this one, they're all going to have five rounded corners, look at that, because we are doing rounded corners, it's not appropriate right now, but if I click on this, zoom in enough, so I can see this radius. 

You can actually hold down the 'Option' key on a Mac, 'Alt' key on PC, and actually just click one of them and go like that, undo it, because we don't need it right now, but you probably had that question, like, can I do one by itself? You can, just hold down the 'Option' key on a Mac, 'Alt' key on a PC, and click it, and drag it, there you go. 

Now before we go let's add a little circle down the bottom here, so the Circle tool, it, the Ellipse is the 'O', I'm going to drag it out. Another thing that I haven't quite covered yet, if you want it to be completely circular or square, you hold down the 'Shift' key while you're dragging. So watch this, I'm going to go back to my Circle tool, and before I start dragging, hold down the 'Shift' key, drag it out, and you see, perfect circle, if I let go of it, ellipse or oval, back to holding 'Shift', I'm going to get about that. 

For the moment I'm going to put it down here, I'm going to grab my 'Type' tool and click once, I'm going to hit my '+', and I'm going to pick an appropriate font size. Now with Type, I want to move it, it's just going to kind of select it, so click off in the background, and then kind of just drag it to where you want. Font size, in here, I'm using my up arrow, to get it to a kind of a size that I want. Bold's kind of weird for that, there we go. 

All right, that is going to be good enough for this video, circles, exciting, rectangles, oh, one little bonus thing for circles, I was going to do this later, but look at this, see the circle, what's that thing do? You probably already dragged it, you ready? Absolutely useless, never used it. I can see, I'm like, yeah, that does a Bar graph, I have not mocked up a Bar graph before, so, sorry, Pie chart is what I want, so you can, that's what that thing does. Anyway, let's get on to the next video.