How To Create Mesh Gradients in Figma (Beginner Tutorial)

mesh gradient has quickly become a standard in the UI design space you see the biggest companies the trendiest startups all using it to elevate their designs so in this video we'll look at how we can create them ourselves but also how we can get some help when we do it now let's get started creating mesh or Aurora gradients whatever you want to call it is fairly simple it's really just three or four steps but before we get into it if you haven't already liked or subscribed I would highly appreciate it now let's start with the first step which is to create the shapes so we zoom in here this is what will determine the structure of your gradient so I'll create a frame call it 600 with 400 in height I'll give it a background color so that I can see it we'll have clip content here so that it Clips anything that goes outside of the frame then I'll just start adding some random shapes maybe we'll have a circle here you won't use the pen tool to make something random like this add a fill to this one make it a bit darker so that we see the contrast take this duplicate it increase in size maybe I'll switch up the shape a bit switch up the color again put it into the background and I'll duplicate that again maybe decrease the size a bit change the shape and now we have something maybe like that I'll give that container some rounding so that it looks more like the one above then it's time for the Second Step which is to assign colors so here you just basically take a palette of colors so I'll grab those circles up here drag them down and this could be any colors I usually pick a color like this then I'll copy it for all these and then just change the Hue here so maybe we'll take that maybe we'll take some for my green now it's time to apply the colors so I'll just grab these shapes add the colors to the shapes and just like that we have something to play with now I'll take this drag it over to this step which is about applying the blurs and adjusting our shapes so that the magic is allowed to happen the reason the magic happens here is because up to this point we only have shapes with colors like plain colors now when we apply the blurs this is when everything is going to mesh together so I'll take all of these Target them I'll add an effect that is layer blur and I'll go in here and just increase the blur to a point where I feel that it looks nice now we have a mesh gradient so that that was all you needed to do but if we want to add this additional extra little flare or oomph to it that's when we grab it we go over to the next step which is the optional step but a very nice one and here we add texture shine and spots let me explain so the texture is just us finding something in the figma community for example and this noise thing here is something I found in the figma community it's basically just an image a PNG where we have noise happening and what I do with this image is I take it I place it on top of everything make sure that it covers the full full thing as you can see here we give it some opacity and we add overlay to the blend options so I'll go in here I'll add overlay and I'll decrease the opacity maybe something like 15 percent maybe even 10 just having it super super subtle now the second step is to add the spots and this is fairly simple as well you just create a rectangle you give this rectangle a layer blur maybe 44 is fine and you give it a color maybe we'll have start with this and this has to be adjusted typically and then we add a blend mode to it again so this is going to be color Dodge once that's done I'll just change the name to color Dodge without an F and I'll copy paste it in here and you can see how it kind of adds this spot so if we play around with the colors we can't change how harsh it is we could also play around with a blur like this and you find something that you feel is looking good enough but you can see how this adds an additional layer to your mesh gradient so that's the second thing the third thing is to add a shine and this is no harder than going to the effects and have your frame selected or whatever you want to add the shine to it could be an object inside of the frame as well quick effect change to Inner Shadow then I'll make this Shadow white I'll increase the blur increase everything basically so the intensity of the color and everything and I'll actually make it the left and coming up from the bottom as well something like this maybe and there we have it a mesh gradient with additional layers that just makes it pop more now this isn't the last step or it's actually the last step when it comes to creating it by yourself but if you want to have some help in creating it you can use other resources and one of them is a plugin called mesh gradient and you have another plugin called mesh gradients but we're going to use mesh gradient and here we just run the plugin and then you can just use these handles to find the exact kind of mesh gradient you're looking for you can even randomize and it will give you results without you having to do anything the problem with this is that what you get from it is a PNG image so this is not Vector which means that you can't go in and edit it afterwards so that's why I like using the do it by yourself method instead now if you want to elevate your designs further I really think you should check out these videos until the next one though have a great life we'll talk soon ciao

Channel: Tim Gabe

Views: 94,973

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

Id: eZ3Rql0yhCw

Length: 7min 14sec (434 seconds)

Published: Thu Oct 13 2022