Create Animated Mesh Gradients in Figma (Tutorial + Files)

if you're tired of using the same old and boring gradients in your designs and would like to create stunning and unique effects that will make your design stand out well you're in luck because today I'm going to show you a really simple yet very effective way to create your own unique mesh gradient and bring them to life with some really simple animation techniques let's Jump Right In first off we need to start by creating our mesh gradient so let's open up figma start a new file and let's start by creating a desktop frame so let's click F and go for our default desktop frame 1440 by 1024 we'll start by adding a number of different shapes and these shapes could be regular circles rectangles or stars or even custom shapes created with your pen tool but for this example we're gonna go simple and use just a regular shape tool to create our gradient so let's start by adding a rectangle here and maybe an ellipse let's duplicate the ellipse make it larger we can also add a polygon just to spice things up and let's add a star like that let's also just for good measure and balance let's duplicate this polygon make it bigger and we can rotate it because why not the more shapes you add and the more you make them different the more interesting your mesh gradient could look like in the end and that's the thing you will have to test by yourself and you'll get to know that in just a second when I show you how we're going to approach this so we'll get back to the fun part later now that we have these shapes created on our frame let's start to fill them up with different colors and we need to choose really saturated colors for them because once we go to the next step you'll see that they will lose some saturation in the process for now let's just find a blend of colors that we like so let's go let's say that we want to go with this orange color select this polygon click I and then pick the color and just change the color by Lighting on this Hue line here so let's go for blue let's pick the color from this blue and then the change the fill to something let's say purple we might want to go for something like magenta go for something like this now we can move this circle to that part because it's a bit empty here now let's uh find the fill and change it to say to dark blue okay and now we'll be adding a very high amount of blur to soften up the edges and create a smooth transition between these different colors and shapes so let's select them all go to the effects Tab and select the layer blur from the drop down let me just move it over here just so we're seeing the changes and as I change the values here you will see that our mesh gradient is already taking shape so let's choose something really really blurred just so transition is really smooth right now and that's the part where you can now go into your shapes change their size maybe rotate them a little bit and then play around with the color to see if you can find something more suitable for what whatever you are looking for then also you can change the opacity of those shapes by just clicking numbers on your keyboard so let's say you want to change this ellipse to to 30 opacity we'll just click three or um eight for eighty percent but let's go back to 30 and uh we also want to change the opacity of this yellow because it's standing out too much and now that I'm looking at it and we could stop at this point because we already have a mesh gradient created just go over here to the flattening selection and then flatten your gradient set just so it's one shape but it will pick the lowest opacity of the layer from the group so be mindful of that when you're flattening your vector so let's enter this action by clicking command and z and we'll do it by hand select it all and click option command NG to create a new frame and we can call this Frame mesh gradient and just make sure that your content is not clipping because we needed to overlap the uh the content there's one more thing we can do at this point and we can add some more texture to our mesh gradients and for that we'll just need to use a noise plugin so let's select our shapes and right click on the canvas and go to the plugins menu and from the plugins click on the find more plugins and just type in noise let's go for this one so let's click on the noise plugin and let's customize the setting a little bit now for that we will need to zoom in and see the changes reduce the amount just so it's not too too strong we can also reduce the opacity just a little bit and you're able to change the color if you want to by default we'll just just make it dark click on the add to layer actually let's uh let's make it white because it's a bit too strong now that when I zoom in you will see a nice a really nice slight texture added to our gradient which is exactly what we're looking for alright so the mesh part is now done let's uh next up let's create our rotating mesh animation what we are going to do right now is we'll just select the desktop plan and duplicate it rotate our shape actually you know what maybe let's just make it a little bit a little bit smaller so let's hit K on our keyboard to access the scale tool and let's let's reduce the size of our mesh gradient by 30 percent and let's place it in the middle because we don't want to make it too big okay let's let me do it one more time so select this tester frame duplicate it by clicking option and shift rotate it and then position it in any position you want and then duplicate it one more time rotate it again and then place it let's see here and then one more time duplicate it rotate it position it will right around middle select all of these frames remove the fill and make sure we are not clipping the content and you'll see that our noise is blending out and then creating this Frame around our selection for this you will need to change the opacity to a really low amount and make sure that fill behind your mesh gradient is matching the color of the noise that we added on the mesh let's select these frames all at once and then go over to create a component set because this will save us some time and some space because right now once we have this component we can use just one component and then animate this and reuse the same component all across our designs and be able to edit it once and all the changes will Cascade down to all of the components that we are reusing on our designs click over to the Prototype mode and start connecting all the frames and for this we will need to change the trigger from on click to after delay let's change it to one millisecond because we don't want any pauses or stops and let's change the animation to Smart animate and the animation effect to linear and let's make it a little more than a second so let's let's say 1200 milliseconds connect the second one with the third one or change the after delay to one millisecond to the same for the third one and lastly let's connect it back to the first frame because we want a looping motion and also after delay one millisecond linear uh 1200 milliseconds you can modify this value to your liking if you want your mesh gradient to spin slower or faster and all we need right now is a final design so let me grab one from the files that I have sitting on my desktop okay now we have our hero design let's select our component and click command and see select or hero section command and V place it all the way behind so option command and square bracket to move it all the way down and now we can reduce the opacity just a little bit maybe to 50 or 60 percent and make sure it's positioned in the place that you want it to be placed in finally let's play out the Prototype and see your mesh gradient in action and the rehabit guys are mesh gradient is complete and it's looking perfect now we can use it as a background or add it to other elements on our designs and make them pop a little bit more which is what our clients are exactly looking for in our designs so before we wrap it up I just wanted to let you know that there's a free figma file with this exact design and this exact animation included in the description of this video so grab it and have a play around yourself and see if you can recreate the same animation yourself okay guys that's it for today's tutorial on creating and animating mesh gradient and figma thanks for watching and I hope you enjoyed it and learned something new today as always don't forget to like comment and subscribe for More Design content and tutorials stay curious stay creative guys this was your Adrian and I'll see you very very soon [Music] thank you [Music]

Channel: UI Adrian

Views: 14,692

Keywords: ui design, product design, figma tutorial, ux, creating gradients in figma, ux design, figma, how to create mesh gradient in figma, blur gradient figma, ui, aurora gradient figma, mesh gradient figma, figma beginner tutorial, blur gradient shapes, figma blur gradient, how to make blurred gradient, figma mesh gradient, mesh gradient, mesh gradients, creating mesh gradient backgrounds, mesh gradient plugin, ui design tutorial, learn ui design

Id: 0xOppTufdtM

Length: 9min 34sec (574 seconds)

Published: Fri Apr 07 2023