Basic, Intermediate & Advanced Ways to Make Gradients in Figma 2021

okay so this is the video this is how we're recording i don't have my camera i'm just making everything as amateur as possible so i can actually make a video instead of having to set everything up again and today we're just going to look at something simple which is making gradients so in today's video we're going to go through how to make this basic gradient how to make this intermediary gradient and then how to make this advanced one which side so base one's very basic uh we can basically do that in like two minutes so let's just get into that first so here we have our basic set now i'm not just going to show you how to do simple grading we'll also explore all the other gradient options that are available let's start by making a rectangle and when you make a rectangle you want to be able to change the color so let's go here and click under fill we can change the color so you can either select from this list of colors or you can go in and pick from your colors if you have a set that you usually use i for this video or like for that gradient i used was it this one um and then let's say you're using a color that you have pre-saved you need to unlink it and then go in and change this at the top from solid to linear and these are all different types of gradients except for image images and image but this is a linear gradient now let's change this to uh another color we'll go with that yellow we can either select from down here which is a set of document colors or you just use a slider pick your color and for this video we're gonna do no opacity and there you have it that's your first basic gradient they're basically the same okay maybe not exactly the same but basically that's how you do it now let's say you want to add a gradient to your uh your writing or something something specific or like some random shape well here we have the letter g let me just make a copy of this and drag it over now if i want to add a gradient to this it's the same process you go here right now we have this purple gradient let me just get rid of it first and we'll start over okay now let's add a color we change this to a gradient linear and let's say we want to make it another orange and red gradient let's go here grab our red and we'll go here grab our yellow or orangish yellow and there you have it your basic gradient now what are we going to do when we want to make it a bit more angled towards the inside because you know you want it to follow the shape well what you can try with something circular like this is to change it to a radial gradient now let's say you want the red to be on the outside well you can just turn this in the color selection panel and now the red's on the outside and the orange is on the inside let's say you want to adjust it a bit you can just move this around so that it's more centralized and there that's basically a gradient from the inside or let's say it's too red you can pull this out a bit and it dims out a bit okay so there you have that now let's say that's not enough for you you want to be more focused around the shape so all we're going to have to do is go into the intermediary stage now what is the intermediate stage well it's using a plug-in called blend me now this is a really cool plug-in because it basically lets you take two paths and combine them or blend them now if you're used to using illustrator you know how this works you know you select two lines and you can blend them together but if not let me just walk you through it so how do you get this plug-in well go to the community tab once you're in the community tab you just search for blending me download this so this basically will let you combine two lines or blend two lines and it creates a smooth pattern this is the plugin that you need i might as well give it a heart so now that you have it let's get back into our file before we continue i'm gonna kill off as google me because it's slowing down my computer i'll see you guys at the end of video now we can focus on how to actually make this so we have this g let's uh let's make a copy of it first just put it aside now how we may how we make the blend is we need two paths so what you can do is you can go into the g and if you click here on the square with the four circles on the corners you can go in and you can select all the points now we want to break this up so i'm going to click command x to cut this and then i leave this the shape by double tapping outside of the shape now you're not going to see it at the side which is fine it's still there don't worry all we have to do now is add that second part of the g back and as you can see the g is back um it's just missing the the filling so how do we select this well let's take the c part of the g or like the outside part of the g and add a stroke to it now we want to take uh one of the color so let's just find the color here or you can go in here and select the color that you want up to you just choose your own color okay and then for the second part of the g let's make sure we don't select the outside um okay so what you do is you tap the outside hold shift and select everything and then you'll only get the part that was not previously selected right now we're going to make this part red so let's take our red whoops so sorry i did it in the fill i should have done in the stroke my mistake so let's go get our red and there we have our red now what we want to do is we want to use the plugin so select both lines go into plugins and select blending me give it some time to open up so on the first time you open it it might take a minute just give it time um now once you have this console open just create uh you can choose how many you want but i just set it to 20 or leave it at the default now what you can do here is like you get this cool uh line pattern but because we want a smooth gradient what you can do is you can blur all the lines so that's what we're going to do we're going to go down into our effects and blur our all our lines so i'm gonna blur it to uh maybe 24 and oh yeah something i forgot to do is we need to thicken the strokes so i'm going to thicken the strokes too let's just do 12. does it look smooth okay now as you can see the orange fades into the red and you know kind of follows the shape which is what we wanted now this isn't the g shape that we want right it's blurry it looks a bit messy um what we're gonna need to do is we're gonna need to crop out all the parts that we don't want so how do we do that well we take that original g that we copied and we use it as a mask so what you want to do is move this g all the way to the back you can either do that by right clicking and then oops right clicking and then sending it to the back or you can do a command alt uh starting bracket yeah this is the shape that you can see on the screen right now um or those keys now once you have that select everything and just hit this button here which is like a moon it's the masking tool once you hit it it'll put that gradient into this mask and there you have it you have your g which is a gradient that follows the shape of the g now you can do some really interesting things with this for example this card that i made at the start so how do we do this well we basically use the same concept um now if you want to make these use the same concept as well but maybe we'll just walk through how to make this sort of 3d shape so let's stay in this area i'm going to make a random 3d shape that we can play with this one's going to be more of i guess like a fortune cookie okay so how i brought this up i pressed p and then i started placing the points because this is going to be random it doesn't really matter what the shape is so i'm just going to do this really quickly and really easily now if you want to edit the corners make sure that this is selected with the square with the four circles on them and now you have these different points here to make it smooth just you can hold command or i guess it would be control on the windows and just hold command while you tap on these circles and it'll smoothen out and create this nice parabola for you so just do that for each corner and you'll get a nice smooth shape that you can make 3d after this so now how are we going to turn this from you know we started with uh two lines well you can also do with two shapes so um how did i make this well first i have to understand what the gradient is gonna look like so let me show you what i did so we use our first stage of gradient making which is basically just getting the colors using the basic gradient tool and figma now we'll stick to our theme of red and orange and yellow i guess so uh the first color is going to be red the next color oops so yeah set it to linear i almost made a mistake there the first color is going to be red uh the next the last color what color should we use should we make it blue we'll make it blue last color is going to be blue and then the middle color can be an orange how does that look it's pretty nice okay now the way that this is set up um make sure that you're progressing upwards in the brightness uh this isn't like a strong rule this is just uh in order to make it look a bit more natural this is what i've done with the example here so as you can see the orange is less bright than the blue and then the red is just a little bit less bright than the orange but red is a more powerful color anyway so it it overpowers the orange by default um but yeah anyway this is the color set that we have so now we want to mimic this gradient and how it behaves so we go here and we select the red for the stroke now to make the gradient inwards we're going to copy this so command c command v and shrink it a bit now if you want to maintain the center while you're shrinking it make sure you hold alt and also hold shift so you maintain the shape now holding shift isn't really that important for us right now because we're not really focused on getting uh you know the perfect shape we're gonna we're gonna play with it a bit uh but yeah just try to make sure that this stays inside of the red um and yeah that was pretty straightforward now when you're making something 3d the gradient isn't a smooth gradient so the first one will go we'll do red to orange okay so red to halfway point now we could make it go halfway into the middle but because you know three objects aren't don't really behave that way we're gonna do uh it doesn't go all the way to the middle now let's make this a bit bigger as well so that it creates that 3d effect a bit better so it's like so now that we have our middle point we make another version of this shape and then we shrink that and now this one we have more liberty to bring it inwards so as you can see this is this gap is basically double the gap that we had before it so let's just make the shape a little smaller so it fits into the orange shape and what we're going to do is we're going to make this one blue okay now i think i'm going to do uh white on the inside but for now let's just let's just work with these and then we'll add the white after this so i'm gonna make the path for this so we're gonna blend it blending me create it and there you have there you have your gradient now i'm going to take that last one and bring it in again um let's go and try to make sure we grab the one at the very end okay there and let's bring that in again and now we blend these two so every time you blend you have to restart the blend i don't know why you just have to close and open it again um a quick way to bring up that blend ding blending me plugin is to hold command and slash like you saw on the screen there yeah just press these keys and you can just search blending and it'll open up the plugin so that's a cool quick shortcut now just create this and there we have our next set of blended uh our next set of blends i guess okay now that we have that let's go ahead and make the white because i realize that there's still a big gap in the middle so let's go fill that up okay now let's edit the shape a bit so that it fits this whole thing better i'm gonna press command and click so that it suits the shape that i want a bit better as well so command and click again command and click command and click okay and yeah there we have it so let's make this one white just because uh you know it's the last color basically on our scale and let's do the blending me for this so i'm going to hit command slash again and pull up this console and create the blends and there we have it there's our final set of lens now i'm gonna go here and i'm gonna change the fill to white because it's the very last one and we want the inside of this to be white so i'm just gonna go okay now let's select everything make this line extra thick so that it covers all the spaces like did we cover all the spaces look even this already looks 3d and we didn't even finish blending but you know you can still see these gaps maybe if it's your stylistic choice to have this and keep it but we want to smooth out the blend so let's go do that let's smooth out the blend using effects let's change this effect to layer blur once we have our layer blur let's add it to 12. so this is just like loose numbers you can do what you want um but yeah i'm just doing it loosely look at that it's basically a smooth curve now we're going to do the same thing that we did last time i'm going to take the outermost the outermost layer and then copy it or if you hold alt and drag it from the layers uh it'll make your copy but then i'll go here oh and make sure you have a fill on your layer before you set the mask so i just settled fill it doesn't matter what the fill is now you can just select everything and hit little moon oh yeah you might as well close this because we don't really need it okay now you see this you see how it didn't really work that well uh that's because there's still layer blur on the mask that we set so let's go down and find that shape that we use as a mask and remove the layer blur so i'm going to remove this and then i'm going to remove this thick 24 pixel stroke because we want to close it in okay is that what we want maybe my lines are too thick let's uh let's go in and change the thickness of these lines uh let's go to 12. i hope that's better all right well yeah you can play around with it a bit um basically this is how we made the gradient from three different colors now you can add your own background to this so that it looks a bit more or it looks more like it's part of something now i'm gonna do a trick where you can copy the gradient or the fill onto another shape all you have to do is click here so you have the fill here you just click on the edge to the left and then you can do command c and copy and you can place it back and click command v and there you have it basically you just transfer the color but when you do this the original color is going to say so you just remove that i don't actually want this set of colors i just wanted to use it as the base but let's get rid of this and drag this over uh and i think we might want to make this a bit brighter and actually make this one a little bit darker so let's uh actually no we'll make both of them darker we'll move this one to the red side a bit okay now let's say you want to add a bit more separation what you can do is you can add a shadow so that's what i'm going to do i have my own set of shadows which i'm just going to use because it just makes things easier um but yeah there we go we just added our shadow see what do we do for this i don't quite remember okay so i added the shadow i just didn't which wasn't as hard as this so let's go in we'll break my shadow and then we'll remove some of the shadows so it's not that hard and you just tore around with it reshape it reap i'm pre-position the shape and there you have it um basically the same concept let me just show you what the difference is with this one so with this one because i had two like peak points in my 3d i had to create these separate uh the separate white shape so as you can see here originally started as two different as like one hole shape and then it got too thin so i had to split it now when i split it i ended up having to uh create this this like outer container to copy the blend over and then it blends into white from here uh the same case for this side as well as you can see the blend is contained in a shape of its own okay so there we have it we have our intermediate blend now on to the exciting part now let me just show you what you can achieve with this blending mode right so i basically thought okay what's currently trending right now that uses gradients uh we can do banking cards so here i have a prototype or like i guess a mock-up of what a banking app might look like and you have these nice gradients to show off your cards now let's try and play this while showing you this i'm also going to show you what the downside of using this is would you want to see how you make this sigma loader because i can do it maybe i'll show you later okay so basically uh you know you have your cards and then you have your transactions at the bottom now here's the issue with using these sort of gradients it'll make your computer very slow or like it won't run optimally now if you're just using one gradient maybe it's okay but if you have four different cards with gradients on them it's going to be a bit of a problem but let me just show you what it looks like when we try to animate it so as you can see it is a bit slow and even when you're just dragging it's a bit slow but they look really cool so what i recommend is create the gradient export it and then put it back in or just use one at a time don't go too crazy yeah okay so basically how do we make this well let's go back to the design file now the reason this is advanced it's a bit easier maybe and a lot more a lot more available for you know an abstract design but what it lacks is control it's really confusing to try to make a specific color with this um so you're just gonna have to play around with it and you know once you get into the file just play around and see what you can generate now we're gonna start from scratch just because it's probably the best way for you to learn this so i'm going to start by making a few circles we'll uh we'll start with four because you know intermediate i mean this you're still learning and we don't want to add too many elements but yeah let's have four uh you can either have circles or these like oval shapes let's make one of them more circular actually okay now let's give them each their own color i'm gonna fill this one with green now i have my own color set this is just to make things faster uh you can just select from the color selection uh this works equally as well it's just lazy to do it and red okay now the thing is with this is that we're gonna use an effect called background blur and for background blur to work you need the fill to be not a hundred percent um now where that's a problem is that all my colors are at 100 so we're gonna have to break this and then change it so i'm gonna change this to 60. uh you cannot use this layer pass-through because it won't work the background blur will only work if it's on the this fill and not off of this layer fill okay so uh we gotta break everything i'm gonna change it 70 break this one change it to 50. so let's go 70 for the orange okay so now we have this now now we're going to set our effects we can just give them all the same effect it doesn't matter but we need to have two effects running one of them is going to be a layer blur and the second one is going to be a background blur now for the background blur this just depends on what you want to set for these ones i don't remember what the layer blur is but let's start with 40 and you can go into the file and check it out yourself later to see if you want to really recreate something like this well let's just click on it so yeah around 40 for the background blur and then 130 for the layer blur so maybe we'll just copy that uh or around around those numbers we'll put the layer blur beneath i don't know if this makes a difference hopefully it does but i might just be wrong um yeah we got everything okay the blur the background blur is 40. we got that now we need to set the layer blur so let's just go 120 and there you have it this is basically the shape that you need to make this effect now you got to start pushing them together a bit so they're overlapping and the colors don't mix that well so look at this you know you have these weird random colors in between now how do you go from these four circles to a shape with you know this these really smooth and nice gradients well you got to select everything and you got to put it either into a group or put it into a frame we're going to put it into a frame just because i think frames are nicer to control but to do that you can either click a and then drag a frame around everything or or what you can do is we'll undo this click command alt g and then it makes a frame space like perfectly fit for the dimensions that you have here um yeah so anyway once you have this what you're going to want to do is just start um just start by putting a background color behind it now you can either do this by clicking r and then drawing a rectangle around your blurry shapes and then hitting command alt back square or front square bracket i don't know just look at look at the keystrokes here and just you know tap tap this um or you can do you know probably the better method is just to make a frame around this now for this one you can just track it around the shape and what are you gonna do here well we're gonna set the fill to something or another color i like to use orange because it usually gives the best results um and right now you can't really see what's going on but it tends to give the best results now for this effect to work you have to change the layer blending mode from pass through to q as this name suggests now as you can see the colors start to uh mess around a bit and they blend like it's quite a nice blend now i made the mistake of using red and orange when we're going to have this red or this orange background so let's maybe change this to another color and we can see how the other colors interact with it so as you can see for if we set the purple it's a bit nicer you can see the smooth gradients going on here but then in this case our purple doesn't really do much but it does behave as like a bit of a balancer so now that we have the basics of this we can start adding a bit more and actually what you can do is you can add a gradient to this so it's not a smooth purple maybe we want to go from purple to orange right so let's do that okay maybe not the best idea because the colors don't work very well um we'll go from purple to dark purple how about that okay now we can see this really cool transition of colors here um and all you really have to do if you want to add more is just add more and copy the shape hold alt and you can drag and the shape will duplicate itself and just add more shapes and you get more gradients and this one's going to be hard to control like like i said earlier you're basically you just gotta try to experiment with it and see what you can come up with because it's not going to be very cooperative with you you can change the colors and see how that affects the color that it generates so the cue of the color makes a difference but also the brightness of the color will also make a difference so you just can just play around with these uh with these colors and see what you can come up with um okay now because i said we'd recreate this one let's uh let's actually recreate that one so i'm gonna change this from purple to uh i think it was orange and we'll go with uh we'll go with red okay that might be way too bright for a red orange to yellow let's go with that okay now orange and yellow don't really work very well with green and blue but we can do purple and it creates you know quite a nice color there this green let's change it to uh you know a bit of a blue so that it plays around a bit better with us and we can just start moving things around and getting the colors that we want and maybe we can add some more muted colors like red okay now you may notice that the color isn't exactly the same like this one's a bit more vibrant a bit more a bit it just pops a bit more so how do we get this pop well we have our initial layer so i'm going to call this blobs which i usually do you'll see blobs in my layer names later um and the frame we're just going to call uh i guess example three because that's that's what it is now to get from blobs to like vibrant blobs is quite simple all we really have to do is create another layer on top of it and now you can give this you can either choose a color or you can add a gradient but i like to use orange and then what i do is just hit overlay and it gives you a bit more of a vibrant color we can call this one overlay so aside from this you can also add your own gradient to that overlay and then you have a little bit more dynamic color set um let's actually go with the purple here and look at that look at how dynamic this color shift is let's add a roundness to this we can add a shadow if we want might not be the best idea does it work not really let's remove that and okay so now you're still going to want to be able to play around with the background what i recommend you do is lock this so command shift l and then basically you've locked that and you can start moving the blobs around without accidentally moving the layer around now when you play with the blobs make sure you don't accidentally take something out of the overlay or like the blobs container because then it'll lose its effect see like that basically um yeah let's uh let's make some fun shapes here okay now what you can also do is remember this square with the four corners well you can tap that and you can adjust the shape yourself to make something a bit crazier or like a bit more controlled to like what you want and yeah it's just a fun time it just takes some time to get something that you know looks the way you want it but basically overall this is essentially how you make an advanced gradient now let me give you a sneak peek as to what i've been working on that is a bit crazy so you've seen this so this is just a sneak preview of something i like to call liquimorphism but basically if you make a gradient this way you have the chance to make these really interesting liquid effects with the gradients maybe i'll show you how to do this in another video but for now that's how you make the gradients and yeah i guess go have fun with it so let's get back into our google meet oh i forgot to change the label of this sorry guys okay so that's pretty much it that's the video you've learned three different ways to make gradients one very basic the second one intermediate using blending me and the third one just crazy hues and you know trying to control uh the different colors so i hope you guys enjoyed this video if you did make sure to leave a comment and like the video subscribe because i'm gonna keep trying to set meetings with myself to make videos this is amateur quality now it's just all about producing content for you guys and we can learn how to use figma a bit better together you're not alone there's a lot of people here who are trying to figure things out and and i'm one of them so uh i guess yeah i'll see you in the next video this is the end and goodbye i'll hopefully be back in a few days and change the writing on this subscribe whoops subscribe okay let me fade into the background oh no my pants you

Channel: Muda Experience

Views: 1,376

Keywords: Gradient, animation, figma, izzymuda, mudaexperience, izzy muda, UX Design, UI Design, UIUX, tutorial, illustrator, graphic design, graphic, mobile app, web design, website, mockup, free

Id: DdLRxt-ItPM

Length: 41min 1sec (2461 seconds)

Published: Tue Jun 22 2021

Reddit Comments

[u/Pianoglacierinono]

A guide to three different ways to make gradients in Figma

My design file for you to follow along with: https://www.figma.com/community/file/989219576285846071/Make-Beautiful-Advanced-Gradients-2021

[u/ChadMojito]

figma balls lmfao GOTEEM