How To Create Gradients in Figma (Linear, Radial, Angular, Diamond)

there's no denying that plain colors can become a bit boring in UI design so as designers we turn to gradients to add some more Flair some more oomph to our designs in this video we'll cover the four ways you can use to create gradients in figma let's jump straight in so today we'll cover linear gradients radial gradients angular gradients and diamond gradients and by the way if you haven't already subscribed or liked I would highly appreciate it let's jump straight into linear gradients so linear gradients are colors that align in a straight line let me give you a practical example here I'll make a rectangle I'll go to the fill option I'll click this color go from solid to linear here you can see how we get this line and you can see how we have these boxes attached to the line these boxes are the different color points of the linear gradient I can switch it up by dragging this faded out color up and down and I can switch it up by dragging this top color as well I can even add more colors to my gradient by clicking here I can remove them by clicking on them once and hitting the back button like that I can change the angle of it by just dragging the handles down here and of course change the colors by going in here and change the opacity if I sew one as well so that's a linear gradient then we have radial gradients so let's grab this one drag it over here again these are gradients where the colors originate from a single center point out towards the edges so if we go in here click here again go to the drop down and change from linear to radial you can see how the red now is in the center and it goes towards the edges Into the Blue so that's radial if we go to the next one which is angular here the colors progress in a clockwise direction from a single point 360 Degrees once again I go in here click on radio and change it to angular same thing happening here I can add more points to it if I so wish I can go back and remove the points if I so wish I can change the angle by grabbing this handle and even increase and decrease the size like this so that's angular let's grab this one again and go over to Dime ingredients this is basically the same as radial gradients but here we have a diamond shape instead of a rounded shape so colors originate from a single center point out towards the edges same thing go in here switch it up to Diamond and you can see that the shape is no longer a circle so compared to the circular radial but it is a square or a diamond now that you can handle gradients if you want to step it up a notch check out these videos now until the next one have a great life we'll talk soon ciao

Channel: Tim Gabe

Views: 21,572

Keywords: ui, ux, product design, ui design, ux design, figma, figma tutorial, figma tutorial for beginners, gradients in figma, how to use gradients in figma, linear gradient in figma, radial gradient in figma, diamond gradient in figma, angular gradient figma, figma gradient, creating gradients in figma, using gradients in figma

Id: BASF9O2_AFo

Length: 3min 20sec (200 seconds)

Published: Thu Oct 20 2022