Matching the stroke of our icons

Hi everyone, in this video we're going to bring in some icons, that I've got in our Exercise Files. We're going to try and match them so that they look, the Stroke widths kind of match this first one, and I'll show you how to replicate them across all our artboards, so yeah, let's dig in. 

All right, let's bring in some icons and get them all tidied up, so that we can use them. So we're going to use the long way still for the moment, using the little arrow there, 'Place Image', I want one, two, and three, so I want 'Icon-Share, 'User', and 'Home'. I'm just holding down the 'Command' key on a Mac, and just clicking them individually, on a PC it's 'Ctrl', I'm going to open them up. 

Now what's the key I hold down to make sure they don't go all squiggly, 'Shift', that's it. So I'm going to get mine to our size, don't worry about the size at the moment, am going to drag these in. Now what will end up happening is, the size here will depend on the last kind of Stroke size that you're working with. So sometimes you might drag them, and they might be thick like this, or might be super thin.

One thing we need to do though is, get them all to be very similar. I've got them kind of a similar-ish sort of size, what I want to do though is scale them down, and you've got to decide here, whether you're just going to use the normal Selection tool, or our fancy Scale tool, it'll depend on what you want to do. 

So in my case, can you see, the Strokes are kind of staying at that 2 point, so it's kind of getting-- if I get them down to about there, they're kind of close, or you can use the Scale tool and just scale them down, they all go down, and we can adjust them afterwards. I want them down to about a, size-ish, and get them into that position. So import them, get them down to kind of this position, and we're going to try and match these now. 

Now you've got to decide whether-- I'm twirling all these up, these are frames, just like groups with stuff in them, if you're happy to work like this now, we'll just leave them there, you can pull these out and delete the frames. What I'm going to do is leave them, so my Share icon in here, with that selected, you can see in here, I need to go inside of it because I want to click on this thing, came in with a group inside of it, but with it selected, actually, I can go in here, and I can see the Stroke color. 

In my case I don't need to change it, because it's matching what else I've got, but the Stroke width is about 2, that's what I used here, and I want to try and match these all. So same with this one, sometimes I can't see the Stroke yet, so I need to go inside the frame, and click on both of these. I'm holding 'Shift' to select both of them, and it's scaled down to like 0.5, you can see there, so let me just type in "2". 

This one here, this is not a terrible thing, but the way this has been drawn is that, it's not a nice little Stroke, it's actually a Fill. If I double click it and go to editing mode, it's not like lines that are on top of each other. If you're an Illustrator person from way back, you'll know what I'm talking about, if you're not, and kind of new to this vector world, you will just find some of them that are made of Strokes, and this one is actually made up of a Fill, it makes a little bit harder to adjust. 

So for this one, to make it thinner, I literally have to go and do stuff like this, which is no fun at all. So you might just download a different one, or just draw one. We're going to draw, you could easily redo that with the Line tool, so I'm going to undo, double click to get out, and Scale wise, these probably need to come down a little bit, and this is where I don't want to be using my Scale. 

If I use Scale now, and scale it down to the right size, it might look like this one here, but if I go inside of it, double click, you can see, it's no longer 2, it's 1.8, that can catch you out, probably nobody's going to notice, but I notice, you'll notice. So we're just going to use the Selection tool to do the scaling, and it means that, holding Shift, it means it'll retain being a two-point stroke, you get what I mean? Oh, broke that, I'm going to leave it, it's broken forever, I can't live with it. 

All right, I'm back, so what we're going to do now is, get those three in, get them kind of looking the same, I feel like this one maybe is not looking exactly the same, "Don't spend too long in there, Dan," this is just a wireframe. What I want to do is, I want to show you another, not trick, but a useful thing in Figma is, I'm going to delete these, because what I want to do is have that on all of them. 

So what I'm going to do is copy it, so from this first one, click on the name of Product Details, and just hit paste. So I'm using 'Ctrl C' and 'V', on a Mac you'll use con-- oh, that's a PC, so PC uses Control C and V, and a Mac uses Command C and a V. So you just 'Command V' on all of these, and gets it back exactly where it got it off that first frame, which is cool. 

So do that, I'm not going to spend too long, getting all the spacing perfect on this, because we're going to have to go and test this on a phone because like, are they too big on a phone, probably, are they far enough apart, probably not, my big old fat fingers is going to end up touching more than one icon. So we'll do that when we actually test on our phone, but we've found our icons, we've got them in there, we've got them looking kind of the same, that'll be good for now, let's get into the next video.