Strokes plus updating color defaults in Figma

Hi everyone, in this video we're going to look at Strokes, strokes around the outside, that's the line around the outside here. We'll look at Burger menus, which is just a group of lines, but we'll also look at the ends here, can you see, they've got nice little rounded lines, instead of this kind of like big flat end on the edge. We'll look at setting some of the defaults, that every time we draw something, like a rectangle, it is kind of set to the rounded corners, and the Stroke, we like, and the color, we like. There's a few things we cover in this video, all right, let's jump in. 

So let's do our Stroke, we're going to click on the rectangle, the Stroke is this one here. By default you get a Fill, you don't get a Stroke. To add a Stroke, hit the little '+' button, and we've got a black Stroke around the outside. The Stroke Width, we can drag, I'm going to put in just two for mine. Do you have to have a Stroke around stuff, you don't, but we're learning stuff. 

The one thing you will get annoyed about later on, is if you do have like a Style, you know, you've decided that this green, with that Stroke around the outside, and you're like, "Okay," I'm going to draw another one, on this Product Details here." 'R' for my Rectangle tool, you're like, "Ah, it's gray," it's gray again, it's got no Stroke, and no rounded corners and you're like, "Okay." So I'm going to go over here, and I'm going to change it to 5, and go slightly mad, trying to get the Eyedropper tool. 

So what you can do is, you can get to a point, you're like, "Actually, I like that, I like my rounded corners, I like my green, I like my Stroke," and I can go change it as the default. So let's go to our little 'Figma' icon here, and go to 'Edit', and there's this one here, it says 'Set Default Properties', nothing really happens, except, that word appears, but now if I click off, grab my Rectangle tool, draw something out, look at that, I've got a sweet green rectangle, with black line around the outside, and yeah, rounded corners. So that is how you set the defaults, I'm going to leave that. 

Another thing you can do is, because these are already drawn in the past, I can't go, like, I don't know, I want it to now look like this. So we don't have Style set up, which we'll do later in the course, what you can do is you can click on this guy and say, 'Edit', 'Copy his Properties', these are his properties over here, and we're going to copy them, and we click on him. Doesn't matter what color he was, if we go to 'Edit', 'Paste Properties', it comes along. We can click more than one, I've got the two rectangles, and let's go 'Edit', 'Paste Properties', there we go. 

So that's Stroke, let's look at a bit more Stroke, we're going on a bit of a tangent there, with setting the defaults, let's look at doing our little Burger menu at the top. So I'm going to zoom in, remember, 'Command +' on a Mac, 'Ctrl +' on a PC, and kind of get up here-ish to get started at least, and let's look at, let's drop down the rectangle. So you just kind of click and hold it, will show you other things. I'm going to use the Line tool, and I'm going to use my Line tool to click, hold, and drag, that didn't work, I don't know why, Click, hold, and drag, it will try and be straight, if it's kind of not straight enough for you, hold down the 'Shift' key.

Shift key will do something with the Line tool, remember, it did with the Circle tool, it made a perfect circle. With the Line tool, it just makes it go in kind of some, you know 45º, 90º, and straight, So I want something kind of that long, don't worry about how long it is just yet, we'll make it, then we'll go out to 100%, and kind of make it the right size. So we're going to grab this guy, we're going to have three of them, so we're going to either copy and paste, remember, copy and paste has that weird option, where it's, well, it's not weird but it's over the top of it. 

So remember, I tend to just use the Selection tool, hold down my 'Option' key on a Mac, 'Alt' key on a PC, and just drag another version out, and it really wants to go underneath it, which is great. I'm going to introduce one more shortcut, if you're like, "If this guy introduces another shortcut here I'm going to scream", close your eyes, or your ears. I'm going to introduce you to the 'Command D' or 'Ctrl D', really common in Figma, it just means, do it again, okay, duplicate, do it again, whatever you want to call it. 

So 'Command D', will just do the last thing I did, so I can go 'Command D', 'D D D'. It's great when you're doing like lists and images, and you've got four of them, you just want to kind of like make a new one, it doesn't matter what you're doing it with. So let's say I want some Type, and I'm making a list, drag it out, holding my 'Option' key on a Mac, 'Alt' key on a PC, 'Command D', 'D D D D', or 'Ctrl D', 'D D D D' on a PC. You can open your ears now, people that are screaming about my shortcuts. 

So with these lines here, you're like, "How big should the Nav be?" The best way is to copy an existing template, so I'll show you kind of some of the templates that Figma's got, but if you are building stuff on your own, especially things like icons, it's best to be, remember, at Shift 0, or at 100% up here, so that you've got a good sense of the size, because if you have them like this, they're going to be very hard to click, or if they're going to be big jumbo ones it's just not that fun, well, they don't look like they should, I got lucky with mine, I think mine are appropriately sized here. 

So what you can do is just drag a box around them all, grab the corner and scale them to what you think they should feel like, that feels good to me. I'm going to put them in a kind of appropriate position for navigation, it's called the Burger menu or the Nav sandwich, that thing you click, that gives you all the sort of options, really common, in the top right, but can appear in the top left as well. So let's look at a bit more strokey goodness, so I'm going to zoom in on it, because I want the little bubble ends. 

Now over here, my Stroke, the Stroke Weight, we've talked about, so Start and End point, they do two things, click on the first one, you can put an arrow at the end, that's great. If I hit undo it doesn't go away, maybe this is just on my machine, I don't know why, undo, undo, that's one of those quirks. I'll leave it in this course because it's a weird quirk, is it just on my computer, no, I think it's universal, but it's probably going to be gone in the future, it's one of those updates where it's on somebody's, some developer's bug fix list, it's not super important because I can go back to None, but my undo doesn't turn those off. We've gone off on a tangent, let's stay on point, because I want to show you these, there's three options.

So your Stroke at the moment just finishes right at the end, can you see there, the second one, I'm going to go, this Stroke has a rounded end, and that is the pretty one that I want. So the Stroke still ends there, but there's this like little round, that's a Butt cap, that is a Round cap, and this is going to be a Square cap. So this one here, look at the difference, between this top one and the bottom one. The Stroke is the same size, underneath, but this has got like a big square cap on the end, this has got an unfortunately named Butt cap, and that has got a nice round cap, that's what I want. I want all you guys, you'll see mixed quite a lot, if you've selected stuff, and it doesn't know what to say, instead of going, question mark, I'm confused, it says, Mixed, which means one of them, there are all sorts of different things. I'm going to say, you're all round, which only partially worked, oh yeah, why not do it at the end as well, there we go. 

So what have we learned, there are some quirks to Figma, like the undo with the arrows, we've learned about Strokes, actually, the last thing I want to do is, with images, we've written, Product Shot, but it's actually more common to just, draw a big cross through the middle, as a placeholder for an image. So I'll just great grab my Line tool, and I'm going to go from this corner over to here, and this corner, got to go back to the tool every time, cool. So it'd be really common to have that as like, that's kind of a visual cue that there's an image to come here, but it's not available right now. 

The other thing you might do, just while we're on the topic, is, instead of those lines - I'm going get rid of them for a second, and bring them back. - is we can put in a, like an icon that shows an image. So a really common one for this is an icon, I'll show you, so it's in your Exercise Files, so how do you bring in an image or an icon? You can go up to, there's couple of ways, there's this way here, so it's weird, under your Rectangle tool is where you bring in images as well. 

So I can place an image, there's the shortcut, the other way, is under 'Figma' you can go to 'Edit', no, 'File', 'Place Image', use the shortcut quite a bit, but I'm going to bring in an image, under your 'Exercise Files', under 'Icons', bring in the one that says 'Icon Image', and click 'Open', and within them-- with this, if you bring in an image, you click once, it'll come through, gigantic size, or whatever size that it was. I'm going to undo, go back to my 'Import Image', find him again, is you can click and drag, and it gives you a more appropriate size, and what you'll notice is that it's squishing it, which is, killing me inside. 

Never leave your icon like that, and hold down the 'Shift' key, if you want to drag it out, remember, same thing with like the lines making them go straight, and the rectangle being perfectly square. That would be very common as well for placeholder image, we are going to not do that for the moment, I don't mind, I don't really care. Lines, actually no, keep the lines there because we're going to look at, something in the next video that is kind of reliant, on having a couple of diagonal lines there. 

All right, that is Strokes 101, let's get into the next video.