Design Cool Instagram Stories in Figma Tutorial 2024
In this instructional video, Charles walks viewers through creating customizable Instagram Story templates using Figma. He begins by establishing the correct canvas size (1080 × 1920 px) and safe zones (250 px margins) with guides. He demonstrates importing free Unsplash photos, resizing them while preserving aspect ratio, and adjusting fills, opacity, and layer blur to achieve desired visual weight. Charles then shows how to add text, create auto‑layout button containers that maintain consistent dimensions, and apply gradients, textures, and drop shadows for stylistic flair. Throughout, he emphasizes building reusable components—color palettes, button styles, and layered effects—so that each new story can be updated simply by swapping images or text. The tutorial culminates in a series of polished story examples, illustrating how to combine these techniques for a professional, flexible workflow that goes beyond Instagram’s native editor.
Chapters
Hey everyone, Charles here for a new video. Today we're going to learn how to create some cool looking Instagram stories in Figma. So you can see that I already have created a lot of them here for colors, for example, some color palettes so that I post them only on stories. And here just some templates kind of, or some stories that I can reuse over and over again. Like for this one, for example, that could be something where you post, you ask a question and then you have a little, you know, the little survey. Here you could say that you have a new style. You can even showcase, like, if you remove that, for example, and here you can say session, or you could say like auto layout here for the button to stay same. And then you could say new design coming— oops— coming soon. And then you can select it and set up the whole thing there. And then you could have a new design showcase right, right in there. So that's very, very, I think, very powerful. There are some rules to learn about. So the first thing is here, I already created a little showcase for you. So the size, the dimensions of a great Instagram story is 1080 by 1920. So as you can see like that, and there is a rule of 250 pixels at the top and at the bottom that is like the, you know, here between them is the safe zone. So here I have a little frame here. So all you have to do is you know, simply press F and then you can create the template here. So 1080 by— I already had it— 1920 here. So I have it here. Then I have simply a little ruler, so a guide. You can press Shift+R to make it appear and disappear. And then you just, as you can see, you have a little arrow here and you can just, you know, left-click and drag it down to have the guide here. And so the second thing we're going to need is, for example, Unsplash where you can have some free-to-use photos like this one, for example. You could copy it, Command+V or Control+V to paste it in a frame. Then I press Shift to extend it because if I don't press Shift, it's going to resize automatically, but I want the full thing. So press Shift, it's going to keep the dimensions right this way. And I already have something pretty interesting. So now what I can do is, um, I can simply select the photo here, press this little fill plus here, then I could have solid so that I don't have a gradient. Then go down to maybe something black like that, change the opacity right here to something like 20 or even 40. And then I could say, have a great weekend right there. That could be an option. Here we could have Circular, for example. All the fonts I use, you can, I think, download them online or buy them. But yeah, if you can just use the ones that fits you the best, you don't have to take the same as mine, something like that. Then we can press white. Or actually what we could do, it's like some, like something like that is not very attractive visually. It's great to have something here. Then we could have a button here, right here. We can again auto layout, so it's going to create a button on its own. Not a button, but a container. Like H is going to be this size, going to keep the same dimensions no matter your text right there. So we could do like 50 by 35 maybe. Pretty good. Have a great weekend. And then we can change the color to something maybe greenish like that or orangey. Yeah, like that is pretty good, you know, or we can change something different totally. And then we can have, of course, the username right there at the bottom here. Here is a safe zone. So I try to go right at the bottom of here. We're gonna do it a little smaller like that. Perfect right here. And then you could add some other stuff, you know, like you could have some pre-made stories like that, but try to play around with some empty spaces so that you can add some stuff. It shouldn't be already all made right away. So now we can just copy this, change— we can keep that actually. Then you could say, I don't know, you could have like new post coming soon right here like that. New post coming soon, maybe a little here. Then we could make a photo if it's a photography, for example, a photography blog. That could be pretty good. Make it a little bigger like that. And then we can go on Unsplash and maybe nature, maybe find a cool looking photo here. This one is pretty good. Paste it in the frame. So you select it and then you have something like that. It could be pretty good as well, something very minimalistic. You can even add some shapes. It's a lot of, you know, freedom and create just whatever you really want to have. Now something like that, you can make some blur things. So to make blurs, you go to FX, Layer Blur, go to the little sun here, then you can change it to something like 200 or 250. Then you reduce the opacity like that. Or you could also just copy paste this one. You can remove this too here. Then you can— what you can do is a pretty cool gradient here. So you copy paste the photo You take the bottom one, as you can see here, then you lower it by maybe 40, reduce the opacity. You press 4, as you can see here. Instead of going there and then selecting 4, you just press the number 4 on your, on your keyboard. Then you go to Effect again, Layer, something like that. You can try a lot of different things, but I think it's pretty good. What you can also add, for example, would be you could add, for example, some textures. So you have a texture here and you can have something like that. Like, you can use screen here, and then you have a cool-looking new coming, coming soon photo. If you don't want the photo to appear, textures, you can just press this one and it's going to pop out, you know, from the main thing, the main story. And I think it looks pretty, pretty nice. So it can vary based on what you want. I really like this style here because I'm a kind of great texture guy. So as you can see, I use a lot of textures here. Textures as well here, texture there and there. So I use a lot of textures, but it's really up to you what you want to, what you want to create. I think it's what's really good with Figma and, you know, just not sticking always with using Instagram to create stories is that you can really have a lot of freedom to make what you want to make with no limits. For example, what else we could have? We could have like a rectangle. Let's do a little call to action here. New post coming soon. Here we can auto layout, we can do 80 by 40, we can reduce the text to maybe 60. I'm trying here. Then we could have 20, maybe a little more, 40. Perfect. Um, I would like a color. I don't know if I have a peach color, kind of maybe that. And here I could have white. Pretty good. So if you want to copy this one here, is you can have access here the colors, this one and this one here with displacement. If you want to call the gradient. So I could have that. Maybe let me try to have— not this one, the one at the bottom. I'm going to try to do the same thing as, you know, here with the photo. So I'm going to maybe do 20, reduce the opacity to 40, layer blur again 150, maybe a little less. And then what we could do is— so we could center it. Perfect. Then here, what we could do is create also a little rounded corner. We could, let's say, have a post here that would be— let's use this one maybe. Yeah, let's use this one for the example. So it's one of my carousel here that I did a while ago. I can have it here. What I want to do first is have maybe drop shadow, then 20 and 10, maybe 20, 20, then 100, and here 15 or 10, maybe 10. Let's try to do 40, 40. I'm improvising here, so it might take a little— it might take some time. Something like that. Then what we can do is go to Fill for the rectangle. All right, it's actually a square. Let's go to Image, choose an image here. Then I have here my frame in my downloads. I import it right there. Let's see if it looks good. Kind of. Not really. Then what I can do is 20, maybe 40. We change that to— perfect. I'm going to use— yeah, I can use that one here. I wanted to kind of like that, so I'm going to check the— okay, so Uber Gradient. Let's see if it looks good with Uber Gradient or not. Okay, essentially, yeah, looks pretty good. And this one, we can remove this one here. Let's just do the same classic thing and see if it works. Effect, Layer Blur. 100. Let's do 40 of opacity here. Then I have another layer blur here. And then what I can do is copy paste this one. So let's do, uh, perfect, 40 at the right place. Same here, 40. And then we're going to duplicate this one. At the bottom, 40. Perfect. And then we select the whole thing, group it, twist it. It's not on the group. Oh, because this one's— oh yeah, okay, it's not there. So let's group everything together. Something like that, maybe hover it like that. Maybe actually we can turn it a little more. This one we can put it a little higher. Like that. Then we can reduce the opacity of everything except those 2 here. Select everything, we reduce it to maybe 40, maybe 60. Yep, 60 is good. And you see here, it looks pretty nice. So we can remove that and you have a pretty cool bust. Or you can just, you know, keep it actually straight. Like that. It looks pretty nice, it looks pretty clean. So, you know, it's just, you know, use what feels right for you. You can use some very basic things. You didn't do— like, I didn't do much here. Maybe white, it's better. Yeah, white is better. I didn't do much, I just imported a photo here from Unsplash. Then created an auto layout with have a great weekend, just a little message that looks a little more extra than doing it on Instagram Story Live right away. And just your little username right there, very easy to do. Here it's a little more complicated. You have some circles that have some opacity and layer blur. Then you have one of your photos with new post coming soon. Then I tried to create it with dark, a dark background here. You can change the background to something a little lighter like that. And then I decided to have also a, you know, as I usually do, a cool drop shadow, which is actually the photo here blurred. Then I decided to do the same thing but add a texture, which looks pretty, pretty awesome actually. It looks pretty nice and it doesn't take much time. You just have the texture You can use the— you can put the photo in the back. Looks pretty sweet as well, or outside of it. You decide what you want. I feel like this one pops it out of the frame, and this one makes it more like a part of it. But you know, it creates something as well, something a little bit mesmerizing. So up to you. And then the texture is just like you take the texture. If it's dark, then you use a dark texture. If it's white, you use a white texture. And then you switch it to something different. Here it works very well with screen. And then the last one is a little bit more complex where you try to highlight a new post of yours right there. And for here, what I did was I— classic one here— I created the— I created a square with 60 of corner radius, and then I created— I copied it, and classic one Dropped by 40, 40 of opacity, and layer blur at 100. It depends on the texture, on the colors that you have usually for the layer blur. Then what I did is just that I duplicated the same frame and created this white square here with 60 of opacity and drop shadow of 40, 40, 10% on the full black, and 100 of blur. Here, just a little auto layout button, new post coming soon, and the same thing here. 70 with 40 of opacity and 100 of layer blur. Here I just duplicated it with 40 of spacing between all of them. And I added— oh, I didn't show you the light background here, which is, as you can see from both ends of the screen, you have this one here, this color, and then a light little, little change here. Not too much, but it looks pretty cool. And so you have a nice little showcase here. So you can just use this one, you can keep this one, and then every time you have a new post, you can just go here And then change the photo right there. Choose image. And same thing here. You don't have to do anything else. You choose the image, you change it, and the rest is already in. So it looks always awesome. So that's it for this video. I hope you really liked it, and I see you for the next one. Bye!
