All language subtitles for 33 - Designing in Figma —

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.