Get creative with effects - Figma Tutorial

- [Instructor] Let's take a look at some fun and creative things we can do with our content. Things like changing transparency, putting maybe a shadow or what's called an effect on things. Taking something like this image and darkening it and adding a blur to it. So let's start with a map over here. What I want to do is we need to select the image within this group. So double-click on it. You can also press enter return to get in there. Make sure you have the image selected. You can tell because it's the larger piece here. Come over to the right, you're going to see the fill. And we have an image right now as a fill but we can actually stack multiple fills on top of each other and get kind of a blending thing going on. Come up here and click on the plus. And you'll see that it's going to say something like linear or yours might look different. I don't know why mine's doing linear but it is. Click on whenever you see here and it should open the panel. Come up to the top and what we're going to do is we're going to apply a solid color. So choose solid if you don't see it already. And just pick a color. You can use something like a red or whatever it happens to be. Now, I'm going to move this out of the way so we can see the image over here. You can see it's covering it up. But what's great about this is we can actually go in now and do something like transparency so you can see through it. It's kind of neat. You can also do a blend mode. Come up here to the blend mode icon and click on it. And you can try different blending modes. Just click on one and see what it does. You're going to see it does different things. Now I want to choose the one called color. That's going to apply a color overall to this. And what we can do is we can bring it back a little bit or a lot to apply just a little bit of the color, a lot of the color. You can also sample. So if you come to this eyedropper and come out, you can maybe sample like the egg yolk and apply that color or something else. Give it a try. See what you can sample. I like the drink up here. And I'll do that. It looks pretty good. All right, click to close this. Other things we can do here which are kind of fun. If you scroll down, you're going to see what are called effects. And what we're going to do is we're going to apply an effect over here. So we need to draw a shape first and we're going to cover up the image and then make it so that we can see through the shape and see through the image and blur it. So come up to the rectangle tool right up here. And what we'll do is we'll just click and drag and create a rectangle. It goes about the size here. It doesn't have to be perfect. And we needed to go behind all of the content except for the image. So you can see we've got all this stuff here. If you drag it down as far as it'll go in this stack and make sure it's above the image, the image is in the frame. So it should be above it. Now what we'll do is we'll change the fill color. So if you come over here to fill and I'll make it a dark gray. And if you look at it right now, you can take the transparency and see that you can do something like that. And it's kind of cool, right? That might be enough for you. But what I want to do is this. Take the transparency and go back a little bit, close this up, and we'll apply an effect now. So come to effects and you can apply multiple effects to a single object. Click on the plus. And you're going to see it applies a drop shadow to start with, but we don't want that. So click on the arrow to the right here and we'll choose something called background blur. So choose that and it will blur whatever's behind it. To change the settings here, click effect settings. And you can just tell it how much to do. I'm going to use the arrow key on my keyboard and you can go up arrow, down arrow and change it to blur. So we'll blur it a bit. Don't make it too much. Whatever you like, whatever you think. Great thing about effects, great thing about fills is that you can just turn them off if you don't want them. You can remove them, you can add multiple, you can stack effects on top of each other. And just for your own learning down the road, you can also save this formatting as a style.