Trendy Gradient Figma Tutorial

Key Takeaways

if you've been seeing these cool mesh gradients around and you want to know how to create them yourself then keep watching this video because I'm going to show you how to do that really quickly right in figma and show you how you can even do it with a lot of customization be able to animate them in a real use case so that you can apply this to your next app design let's get into it so the first way is the easiest and fastest and it's just through a plug-in here in figma called noisy gradients so I'm going to open that up and as you can see you already have one to choose from here you can just keep generating new ones until you really like one so I like kind of this light and Airy one and they'll have different amounts of colors and you can customize these so say I want a three color one but I want completely different colors I could customize those colors you can also get rid of the noise or add it back in and you can choose what size you want to import this PNG into your file as so let's do 2000 by 2000 pixels and hit insert and you can see here if I zoom in it does have that grain to it which is really pretty and I could just keep generating these and come up with a whole library to use for a project if I wanted to um but the only downside to this is it isn't fully customizable because you can't move these shapes around it's just a flat PNG and you can't animate them so now I'll show you how to do this manually in figma so that you can really control all of the shapes and colors and you can even animate it if you want to which I'll show you how to do that and I'll show you kind of a fun use case for a fun idea to maybe use this in an app or web design of your own so let's start with a frame we can just use the same size 2000 by 2000 pixels and what we're going to do is start by just making some random organic shape so I'm going to grab the pen tool and I'm just kind of making these shapes just as long as they're kind of smooth and organic looking that's what we want and then I'm going to get rid of the stroke and add a fill so we'll just do purple for this one and then to make life easier I'm just going to duplicate this and change around the anchor points a bit we'll make this one orange make this one this like electric green and then let's do one more kind of bigger one that's maybe like a light pink maybe a light purple would be pretty and I think I'm gonna make this light more red okay so now that we have these let's just position them um you know kind of evenly around the canvas and then what I'm going to do is select on all of them and come over to effects hit the plus button and change it from drop shadow to layer blur and then once we have that I'll just hit the sun icon um and we're going to change this to like maybe 400 could be good even 500. Maybe 450 sometimes you have to play around depending on your shapes see kind of just the look that you're going for um it's totally up to you what that is and then again I'm just moving these around a little bit um so that's looking pretty good now what we're going to do is just pull in a file from my desktop that I downloaded it's just something that I downloaded from the internet that's this grain texture um you can get this for free from a lot of different sources there's some in the figma community as well I'm just layering it on top of all of those and we're going to give it a soft light blend mode so now you can see we've added this pretty grain and that is looking really good so you can stop there if you want and you can make a bunch of different ones maybe change up the colors and the shapes you could have ones with you know 10 different colors just two different colors it is really up to you but first um you know I want to show you how you can actually animate these so let's say we wanted it to look almost like an orb like screensaver um what we can do is just just duplicate this and then move these shapes around a little bit so I'm just going to even make some like bigger and smaller we don't want to change up the layer order at all that's really important but we can make any other changes that we want I want to make sure this is really in the frame there we go and we'll do one more so I'm just going to kind of make it look like it's spinning so I'm just going to kind of keep moving these around in a circle while also you know changing the size and shape a little bit so let's grab our blue one you can make this really subtle or you could make it you know more um drastic just up to what you want it to look like okay so I have those there now and what we're going to do is I'm going to throw this back on if if you like that look and just copy and paste it onto the other frames and then head into prototype mode and I'm just going to select on here grab this plus and bring the arrow pointing to the next one and we're going to do incentive on click we're going to do after a delay but we're just going to do one millisecond that's the the shortest delay we could do we're going to navigate to frame number two we want it to be smart animate and we want it to be linear and I found that 7 000 milliseconds is pretty good um 6000 is also good if you want it just a touch faster so we'll see what that looks like and we're going to do the same exact thing here after a one millisecond delay keep all these the same and we also want it to loop back to the beginning so same thing after a delay of one millisecond and that should be good so now I'm just going to hit play on this flow will go up into our options and do fit to screen and since mine is so large and I have kind of a big um file in front of it it's going to take a minute as you can see to render so just give it a second and there you go you can see that these shapes are kind of just spinning and morphing into you know what we've created here so I think that looks pretty cool and you could like I said use these as like a screen saver or just you know whatever you want to use it for um one thing that you could use these gradients for in general is maybe like a loading um image so let's just say that in this app here I made this in a previous video here on this channel now a fun way to actually use this in context in an app could be as like a loading image so let's say that we have these images here but when you first open the app obviously it takes a minute for images to load so instead of just showing like a gray box what if we showed you know like a very low-fi um gradient here so these are pretty small images these are 131 by 131 so I'm going to create a frame that is 131 by 131 and I'm just gonna do the same thing but this time I'm going to choose colors and shapes that kind of remind me of these images right so let's try at first um this one so I'm just gonna create kind of like a shape here again we're going to get rid of this stroke add a fill and to add the fill I'm going to sample from here so maybe we have sort of this abstract shape here and maybe we have some more here but these ones could be this orange color so I'm just gonna grab that and then maybe we even have kind of like a bigger shape here that represents the table underneath this brown okay and then the background is generally white so we can kind of just keep it like that now again I'm going to select all these add a layer blur effect since we've got a much smaller um frame here 40 is actually good for our layer blur so we have that and then I'm just going to do the same thing I'm going to grab this green and just place it over the top to give it that little green so now what if we had this as our loading image let's try one more with this one so I'm going to move this layer we'll make this one this green you can get super abstract with these go and then there's also a little bit of like sky blue in this one all right then once we're happy with that I'm just going to put the green back and there we go that could be another way to do it but of course I really like the look of these gradients and hopefully you like this little tutorial so that's another way to do it though I definitely prefer the look of these gradients especially when they're nice and full like this so hopefully you enjoyed this and you'll try this out yourself I hope you have fun creating your own gradients like this and if you like this video make sure to give it a thumbs up and check out this video so that you can learn three figma secrets that are gonna save you tons and tons of time thanks so much for watching and I'll see you guys in a future video bye