Tips & tricks for using images in Figma

Hi everyone, this video is all about images, we're going to look at the various ways to import them, how to adjust them, multiple images, and how to kind of play around with things like exposure, kind of like basic Photoshop stuff, so we can kind of push this in the background, some of it is a little bit unintuitive, so stick around and let me show you what to do. 

So we've covered a little bit of images earlier, let's go through it all, all the kind of good useful stuff to know. So bringing in images, you've probably seen, there is about a zillion ways. So earlier on, I'm not sure how we did it, but there is a 'Place Image', or you can go to here, and go to 'Place Image', they're the same thing, or the shortcut, that's what I use the most. 

So let's bring in an image, just one, when you bring in an image, you can click once and it comes in at its full size, which is too big, in our case, yours might be fine, you want-- and you might want to see it at its full size. I'm going to use my shortcut, that's 'Command Shift K' on a Mac, and that's 'Ctrl Shift K' on a PC. So what I tend to do is, when you bring in an image, is to drag it out, so I'm going to drag it out here, you get it the right size, be careful though, hold down 'Shift' to get it to kind of, proportionately height and width, all right, let's bring in multiple images. 

So I'm going to use my shortcut again, 'Command Shift K', 'Ctrl Shift K' on a PC, and I bring in all of them, come on, guys. What you'll notice is that your little cursor will update, eventually, there's seven images, and hold 'Shift' down, and just bring them in the right sizes, the things appropriate to this. 

All right, rotating, we've talked about before, but let's just reiterate, if you have your Selection tool selected, and just hover in this magical corner, you can click and drag, hold 'Shift', it will snap it around, you can type it in over here, you can be 180º, thank you, very much. 

Now although this isn't Photoshop, you can do some basic stuff in here, they give you enough to get by-- because what I want to do is, I want to, let's say that I like this image here, but I want to lighten it up, so when I select it, over here, under 'Fill', that's where 'Image' ends up. I can click on it, and I get rid of all the color swatches, and I get image related adjustments, so I can play around with the exposure. 

So I want to bring the exposure up a little bit, you can do basic stuff, we're not going to cover it all, but Saturation, oh, black and white, there you go, change the Temperature if it's, maybe bit too blue, bit too yellow, have a play around with these. 

Again, not Photoshop, but some of the good basics in here, to update an image, another way to bring in an image is to have a shape already. So let's say that I've got this circle here, could be a rectangle, with it selected, I can say-- actually, I don't want you to have a Fill of this primary color. I'm going to break that link, and we saw before, images are Fills, so I can just go, I want to change the color of this Fill, from solid, not to linear or radial, gradients, as great as those are, I can go to 'Image', you get this, like little checkerboard thing, you see, it's just like a placeholder, you can say, 'Choose Image', and we kind of go this way. 

It's great if you've already got shapes on your document, like I do, kind of mocked up, click out, I'm going to delete these things now, we're starting to move along. So there's a couple of places, just to click the button, there's a shortcut, you can drag it on from your desktop, did I cover that one? I didn't. If I do this, problem is it comes in a giant size, so if yours are appropriately sized, you can just drag them in from your Finder window, and that last one there, where we just clicked on a shape, and went into the Fill, and said, you are an 'Image' now. 

All right, I'll do one more, I'm randomly picking these. The last thing I want to do before we go, is I'm going to use-- I'm going to get rid of this colored background, and I'm going to kind of combine the things, we just learned a little bit, because I want a background image. It might be a hero box, I'm using it for the full website, so I'm going to grab-- you've got two options here. 

So I want to use, say this image, and this is not the bad way, but I'll-- it's a way, it's kind of natural way you might do it. So I'm going to put this on here, and I'm going to make it bigger. If you hold 'Shift', it will do it proportionately, which is normally good, but what I want to do is I want to hold nothing down, because, can you see what it does? It naturally wants to be responsive, so I can just drag it out to the size of this window, anything, all right, just move it to the back , where is it? There it is there. 

So I'm just going to right click it and say, 'Move to Back', or use that sweet shortcut, and then you start working that way. Now there's an image here at the back, that's fine, but it's an object that can be moved around, it's a bit of a, there's nothing wrong with it, but it's actually easier to just switch out, the Fill of the actual frame itself, you don't have to, but the cool thing about it is, over here, Home page, I've got selected , again I'm going to break the link to that Style, because actually I want that fill to be an image. 

You need to play with both, because you'll get lots of stuff from the community, that is set up this way, and it's not intuitive, but it's useful. So let's go choose image, and I'm going to find that one, which one is it? That one there, cool. So it works the same sort of way, we already had a shape, and it's filled it, but the cool thing about it is, there's nothing in my layers, it's tidy, and even though we've applied it to this kind of like top level Home page, is actually right at the bottom, and I'm going to go back to where I did it before, my Image settings, I'm going to say, actually, exposure is a good way to kind of lower it down, it's the most obvious one. 

What I find useful though is, often get exposure down a little bit, but it's not so much, everything being down, it's mainly the highlights lowering to kind of remove, some of that strong contrast, so you can just play around with these, decide where you want this to be. I'm going to pull the saturation out as well, not all of it, I wanted to do this, like background-ey thing, you're like, I can't see the text, yeah, that's what I'm going to do in between videos, I'm going to grab all this and make it white, just so it stands out in the background. 

All right, that was my quick, going through all image-y stuff in one video. All right, let's get on to more image stuff in the next video.