Original subtitles

‫Hey, everyone, welcome back.

‫We are going to talk about images within Figma.

‫So we are going to use a ton of images.

‫I mean, it's just the way it is, whether it's for like product images, whether it's just for landing

‫page images.

‫I mean, there's so many reasons why we are going to use images and I'm not going to get into that because

‫I think you all know now the ways we can add images to our file, it varies.

‫I personally like using plugins and I'll explain what plugins are after, but the ways to add images,

‫the two main ways that I personally like to do it is through copy and pasting.

‫I mean, and then there's drag and drop.

‫Then there's the third way, which is essentially importing the image through the file browser.

‫So I'm going to show you the easiest way to do it.

‫An example is say you're in another file.

‫So I'm in this file and I see this image that I really like.

‫I can just copy it by pressing command C or control C.

‫And then going back to my other tab and then pasting it with command v or Control v.

‫And that image is going to show up here.

‫Now, you can also.

‫Access that file on your desktop and you can drag it right into the canvas, and that's going to be

‫totally fine as well.

‫You can do this with everything frames.

‫You can do it with like groups, anything from one file to the other.

‫You can basically do that.

‫So as you can tell, I just pasted the whole frame in here.

‫So I'm just going to delete these.

‫I'm actually going to use the other way to get one of the pictures I want in here.

‫So if I use the rectangle tool.

‫And go down to place image.

‫You'll see the shortcut and you'll see that you can just click this button and it's going to prompt

‫you to select the image that you want.

‫So I'm just going go into my figma images and then I'm going to my large image PNG and I'm going to

‫place all you can just click on the canvas as well and it's going to place that.

‫So that's how you get a picture into your file through importing it.

‫Now you can edit your picture in so many different ways.

‫Let's take a look over here to our design tab on the right sidebar.

‫Now you can scale it.

‫So if I want to adjust it, you'll notice that.

‫The image is actually like, it's fine.

‫It's just kind of filling the container.

‫This is kind of acting like a frame in a way.

‫It's pretty interesting.

‫And that's why I like using pictures like this in Figma.

‫So you can just size it like that.

‫You can also hold shift in size and it's all going to size as well.

‫So if you want to retain that original ratio of the image that you had, you can also just adjust things

‫like the radius.

‫You can adjust.

‫Like if it's rotated here, you can even do that here by just spinning it.

‫You see this little angled cursor I have now.

‫Now I can just take it for a spin.

‫So that's really easy.

‫And the other things that I really like about images is like the settings right here within the fill.

‫So you can choose right now it's set to fill and that's why it's moving like this.

‫But if I said that to fit, it's going to fit basically.

‫Whether it's the fitting horizontally or vertically.

‫See, it's fitting the top and the bottom.

‫But if I shrink it or make it more skinnier, it's going to keep the original ratio of the image and

‫it's going to just fit the width.

‫And then you have crop, so you can crop it any which way you want.

‫Now the problem with crop, though, is like when you go to move it in different ways now it's it's

‫not going to keep the same aspect ratio for the actual image and you're going to skew it.

‫So I'm just going to go back.

‫So we have crop and we also have tile.

‫So if your image doesn't, you know.

‫Span.

‫I don't really use tile at all.

‫Probably could be useful for patterns.

‫I personally use Phil a lot and sometimes crop depending on the image, especially with like landing

‫pages.

‫So that's how you can adjust some of the different types of cropping and positioning.

‫You can also set different things like the exposure if you really want to get into some like editing

‫the contrast saturation.

‫I know I'm making this look really bad, but I'm just showing you all the different things you can do

‫with a image, you know, shadows.

‫That's horrible.

‫So I'm just going to reverse all of that.

‫There you go.

‫You can also set the blend mode over here and you have multiply darken.

‫So if you want to do a little bit of like Photoshop kind of esque stuff, you can do that as well with

‫some of the layers.

‫The other great thing that I really love about Figma is that, you know, you can actually come here

‫into the fill and adjust and add.

‫Like if I want to add, say a gradient, I can do that.

‫I can just add a new layer, go up here, set it to like solid, you know, set to 100%.

‫Then you can start playing around with like how that kind of looks like, Whoops, I'm going to go back.

‫And yeah, you can make your own gradient if you want.

‫So here I can just make like a white gradient that slowly goes into white up here.

‫So that's that's another thing you can do with some of these figma files over here, which is really,

‫really interesting.

‫And that is how you use images in Figma.