Harness the Power of Gradients - Figma Tutorial

every one I'm gonna show you how to make this illustration completely with gradients using just figma so over here I have some predefined color palettes that I chose I kind of wanted a warm kind of like sunset feel so I went with a for my shadow purple and for my highlight a yellow color but for whatever your project you're working on just to make sure that you were high light is your warmest in your brightest color and your shadow is your coolest in your darkest color in this case I chose this mid-tone to kind of like bring out a lighter color in the middle and the reason for that is because if you make if I made a gradient I selected a linear let's move this here here see how it snaps make sure it's all snapped yeah if I select this one and I select my shadow notice how in the middle it looks extremely muddy and kind of gross so what I did to get to this color is actually selected this right here in the middle and I just started playing around with like the shadows or like the different shades in the middle do you don't want it to get too bright or else it starts not complementing your other colors in this case like mine is not the saturated and you don't want it too light or else you can see a visible line ultimately what you want is just a really smooth transition that's also like appealing in the middle like you don't want it to look like super dull colors in the middle so I'm just gonna select my predefined slap swatch that I made and just kind of like position it so July again making sure that visible line isn't showing up so I'm just right about here seems to be one of the most smoothest transitions for this color so now that we have our gradients sorted out let's make our shape so the way that I've done that is I drew a rectangle and double-click on your shape that you made and I just inserted a point in between these two anchor points and I just hit shift error up arrow key a couple times in this case it was three times and then all you have to do after this is just create a new style with your gradient that you made in this case I'm just going to call it my gradient uh and then you could just apply that this just using the little Foursquare icon and unlink it and now we can move around the gradient cool so now I kind of need some background in order to help frame this shape in so I'm just gonna like grab my pencil I'm just gonna make some like random gelatinous shape that you find on dribble and what you're gonna gonna want to do is well in this case I have this set as my shadow so my shadow is my darkest color in the background so what this looks like is like that so notice how it like the gradient applied to this since this is the same color at the bottom it almost looks like it disappears into the nether nether and by having your warmest your warmest colors your highlight your mid-tone is your like your mid-tone and then your shadow is your darkest color it kind of creates this atmospheric depth which is what we're after I'm just gonna like tilt this around just to match the other one there we go and now that we have our ingredients shape we kind of want to make it like this edge shape right here so what I'm gonna do is I'm just going to expand this out a bit it's like that and make sure it just lines up with your thing in this case I'm not too worried about it being like perfectly aligned just for the sake of this demonstration but my OCD is killing me I didn't there we go and all I'm just gonna do is copy and paste it and notice how it hit that line and I'm just going to make sure this is aligned properly great now we have our two sides to the shape now all we have to do is just intersect them with the Pathfinder tool in Sigma so all I'm gonna do is just select the shape in the first shape that we made in the background I'm just gonna hit command C and command shift B and what that's gonna do is paste that in place in front I'm just gonna select either one of these shapes it doesn't matter which one you select see and then you just go up on the Pathfinder tool and hit intersect and it'll intersect that shape one more important thing make sure that you flatten the selection and now it is completely filled in that shape plate you don't have to worry about anything else I'm just gonna literally do the exact same thing to the shaped great and now that you have your all your sides made what you're gonna want to do is take this and make sure like in this case I'm just gonna make this as my highlight color or my highlight side so all I'm gonna do is just slightly adjust the position of this gradient to make it look like this has more light because this is the lightest side of the shape and I'm just gonna do the exact opposite on the side this side is going to be my darkest side so I'm just going to bring up this side so what we end up having is a high light side mid tone top side and a shadow side and we notice that we this is all just completely created from one gradient it's super simple it adds kind of like some depth of field and it's all super simple it works really well if your brand is working with like just a limited color palette if they have like some cool green at thing going on you won't want to make some illustration for them like it's it's a great idea to experiment with monochromatic gradients okay so I just adjusted everything so it matches the original example a little bit better so all I'm gonna do is I'm gonna copy and paste these shapes but the way that we make it look like it's fading into the background is not actually by adjusting the opacity although that would be a much easier way to do it in my opinion I feel like that's a little bit lazy just because you can get a much better looking result by just adjusting the gradients and you don't even have to worry about making sure like in this case like if you wanted to have it pop out and stuff like that so what I'm gonna do is just like shrink this down I'm just gonna try to match my previous example that I made such as possible [Music] all right and now that I have all the shapes placed down I'm just gonna try and shade them in just by using gradients and nothing else so in this case I'm gonna start with this shape so I want it to be just slightly darker than my main shape right here so what I'm gonna do is I'm just gonna select that gradients and I'm just gonna bring it up just a little bit and I'm just gonna follow suit with everything else so this one's just bring it up a little bit so one just bring it up uhh well and and don't go and make sure you don't go super crazy with the contrast you you still want to make it look like the same shape so it's important to make sure that you subtly change the gradient for each side and in this case this is the furthest down smallest shape so this is going to be the darkest so in this case what I'm going to do is I'm going to select these gradients and I'm going to move up all thing really up same the other two sides and notice how it's just a slight change from the light side to the darker side actually what I might do is actually just bring this one and make sure your mid-tone is in between both of these that [Music] I just bring this one up a little bit more and there we go so now you and now that I have my shape created I'm just going to go through and do the same to the other shapes [Music] [Music] now that I have all my shapes set up what I'm gonna do is I'm gonna finish the rest of the landing page while the layout and I don't need these anymore so I'm just gonna let them off the page so how I made these is I actually just took the shadow color and I just made just like a random another random gelatinous blob behind it it's kind of like adds some more depth and if I were to make this in CSS I would probably just have this as the background layer and then this just pinned in the bottom right hand corner so I'm just gonna select the shadow layer and then I'm just going to move this up but and this is a little bit warm or a background layer and especially something that's supposed to be like light gray so what I'm gonna do is actually just move this more towards the blue side and just cool it down a little bit but not too much we can't still want to make it that warm purpley side and just make it literally look like that it's just a D saturated version of the shadow color in your case if you're using like a warmer color even warmer than purple like it your pale color might be more towards the purple side but I usually try to keep the neutrals in somewhat a blue territory whenever I'm making my neutrals and it's just because like whenever you're making shadows and stuff like that usually artists and painters they use blue to indicate shadows and it's just because it's such a cool color it shows the lack of light or the lack of warm in the drawing and now that I have my shape and the background set up all that's left is the text and links so what I'm gonna do is gonna make for the sake of simplicity just like about a 150 pixels wide set this is both sides I'm just going to use this as a guide so it's about 150 pixel margin on each side in truth if this was in development it would be a max width around a thousand 50 pics a thousand 150 pixels so I made the text logo just by using one of the default Google Fonts they come pre-installed with figma so opens I just called it radiance and now I'm just going to set this to 32 point bold I'm just gonna wind this up to the top so that way I get some exact measurements going I'm just going to hit one-two-three-four-five while holding shift and hitting the down arrow keys and just gonna hold alt shift and drag this to the right line this middle one to the middle and gonna align the right make this 16 pixels and the bold font is a little much at that size so I'm just going to set it to semi ball you for these buttons I'm just going to make sure that they match the same colors that I was using as my gradients and make this 50 pixels big nice big buttons for big call-outs you and I'm just gonna swatch I yellow from there make it easy max out the border-radius buttons make a nice pill shape you now normally these buttons would have of padding automatically or all sides I'm not really too worried about the horizontal and I'm just going to space these route out about like 30 pixels art is text links a little tight so I'm just going to add up ten more well and that is our header completes the only thing left is idle you and for titles make sure that you have a pretty tight letting on they're like you don't want it to be really intense because the fact that it's really big usually like you don't want it to look ridiculous however this subtitle font I'm going to space it out a lot more the ratio just for readability because as you start decreasing in font size you need that extra letting for it to be legible I'm just gonna use open sans' for the body font the reason why is because it's a nice as these nice edges to it and makes it easier to read at lower your font sizes where it is like a geometric sans-serif like poppins it's a little more difficult to read at small sizes I'm just going to make this regular align this too film and set the letting - let's make it 3d in this case in order for me to add in em - all you have to do is do alt shift and - on Mac and now the only thing for us to do is the button you I'm gonna make this one a little bit bigger than the navbar buttons just because it's a the main CTA and we want people to focus on this one first I'm also gonna make this 170 all gonna be a huge button you I'm noticing that the contrast is pretty bad between this bright yellow and this way text so I'm just gonna select my gradient and just drop it down just slightly just so it still has that effect but you want it to be accessible enough so that way people can read it and that is it let me know what you think of the video in the comment section below this is actually my first youtube video so any comments criticism any anything like that is highly appreciated thank you and please subscribe for more videos like these to come

Channel: Dylan Parks

Views: 8,275

Keywords:

Id: xRHFOgITMu4

Length: 22min 11sec (1331 seconds)

Published: Thu May 14 2020