How to Create Animated Mesh Gradient Backgrounds in Figma | Interactive Components

welcome back everyone so today's video i'm going to show you how to create animated mesh gradient backgrounds so in one of our previous video where i was explaining about the interactive components feature i used an animated gradient background and a few people have asked me in the comments how to create that so here's a detailed video on it so before you can get started i want to show you a couple of cool sites where you can get these mesh gradients for free so the first one here is meshgradient.com and in this site you basically have to choose your colors so you can choose four different colors for your mesh gradient and once you're done choosing your colors you have these basic default points and you can add multiple mesh points here basically to blend these colors at different positions here as i keep dragging this these gets blended so properly and i can add multiple of these points so once you're satisfied with it you can just go ahead and export and use it in your projects so the next one here is from ls graphics and this is a cool collection and these are pre-made mesh gradients as you can see those are really cool colors that are being used here so you can just download those and use it in your projects and then you have sites like free pick and a lot of other sites where you can get these mesh gradients for free but for us to create an animated gradient we need to create it from scratch and then only we'll be able to animate it so for that purpose we'll just take a sample from here just for the color reference so this one looks cool i'll just pick this one and bring it on to figma right here and just paste it so there we have it inside the frame so first thing we'll do is we'll just duplicate it and keep a backup of it so these are nothing but random colored shapes that are blended together so we just need to create random shapes and just add colors and finally blend it together so the first thing i can see here is this blue kind of shape right here so i'll just take a shape rough shape for that and there you go our first shape is completed if you can notice i'm not going through exactly the color separation line here i'm just taking a safe area because in the later part we'll be using a property called as layer blur so once you apply that these edges get blurred a lot and that is why you need to take a safe area and the next shape is for this light pink that you can see here so as you can see i'm trying to intersect both these shapes so that we don't have gaps left in between so make sure that you try to intersect both these shapes properly so there goes our next shape so once you're done with that you can start adding the colors so for that i'll just remove this image right here and then we'll start adding colors to this so in the first one as you can see this is a linear gradient kind of a thing so i'll add a fill right here and we'll pick colors we'll make this linear gradient and we'll pick colors from here so one is this blue right here and on the other end you can choose this very bright blue from here and you can change the position of this one from here to here and you can see that this blue is somewhere here so i'll just set it to this part here and the last step we gotta do is simply just select all these and add a property in the effects called as layer blur and just start increasing the layer blur so i'm just using shift and the up arrow key and as you can see you're starting to get a image which is blurred properly so that is one way to do it uh you can just draw random shapes into it and the next way is you can use a plug-in called as if you go to plug-ins i have this plug-in called as blobs so you can use this plug-in also to create random shapes and then you can just fill it up so you can set the complexity of the blob that you want and just say create and as you can see it just creates multiple blobs and then you can just close it and use this at random places like this so i'll just use the same colors right here so that it's a bit quick i have set the colors and now i can just increase the blend value for those and there you go i have just created a different mesh gradient with the same colors but different shapes and also you can use circles so many people use circles for this and i can just use the oval tool right here and you know just start creating circles [Music] so there you go guys i have just added this into circles here and as you can see this is also a mesh gradient so that is how you can basically create mesh gradients so that is the first part of the video and now we'll try to animate this using interactive components and see how we can use this so i'll just take this uh to the bottom right here so what we'll do is just right click on this and create secret component so now this is a component and you just have to add a variant to this one so now we have two variants so in this variant you have to just move these circles here and there and you can increase the size of a couple of them just move it to random positions uh so there we go i've just moved the position of these here and there and now you just have to animate this so go to prototype and link this one to this one and give this as after delay of one millisecond and say smart animate keep this at two or three seconds so i'll keep it at 2.5 seconds and link this back to the same thing with the same settings which is after delay of one millisecond smart animate and this is 2500 milliseconds so here we have basically created our animated background now all we got to do is just use it on a home screen so for the time being we'll use this as our home page and i'll change the fill of this one to complete white and you just take an instance of this one and add it to this one and just send it back so that's it we are done here so now if you try to preview this you can see this cool animated gradient background so these are subtle animations that keep happening in the background and this is quite trendy nowadays so that is how you can create this on figma a quick note here thanks for all the love and support that you've shown us on youtube and we have just recently started our instagram page and as you can see here we are posting some really interesting and informative design bites so make sure that you follow us there so that you don't miss out these content and as always thanks for watching

Channel: Design Xstream

Views: 52,028

Keywords: How to Create Animated Mesh Gradient Backgrounds in Figma, how to create mesh gradients in figma, creating mesh gradient backgrounds, how to create aurora gradient backgrounds, multi gradient backgrounds, colorful gradient backgrounds, aurora like backgrounds in figma, animating gradient backgrounds, animated mesh gradients, animated gradients using interactive components

Id: kbqki6hnZJA

Length: 5min 30sec (330 seconds)

Published: Mon Mar 15 2021