Figma Tutorial: Glassmorphism UI Design Tutorial for Beginners

hello beautiful people it's mizko here and today we're going to create some really beautiful crispy transparent glistening type glass morphism cards in this video and i'm going to walk you through step by step on how to do that but i'm also going to drop you guys a very secret very very secret one don't tell anyone about this a website that will give you six free resources every single day and we're gonna grab one of those resources and use it in this tutorial if you want to follow along so let's get right into it now guys the designship.com if you haven't checked out this website before you have to check it out and you have to check it out because it's actually one of my websites but i have a really hard working team working on this every single day and we share six resources for you to help you elevate to help make a process simpler and to make you become a better designer so what i want you guys to do is if you want to follow along in this design tutorial head over to thedesignship.com head over to freebies and then you can find a gradient resource not gradient i haven't used that one just yet but not not cool hue but if you just search mesh gradients over here click on mesh gradients and you will find that there is a free mesh gradient collection now view the site and from here you can pick any gradient that you want to use in this tutorial so i'm going to pick one i'm going to select this one and hit copy image and then i'm going to head over to my figma hit f on my keyboard put down a canvas a frame and then i'm going to paste my gradient in here so hopefully you guys are following along right now and if you appreciate that free resource and that collection make sure to gently smash that like button guys alright guys let's get into it we are going to create that beautiful glass morph sim effect so hit r in your keyboard drag and make a rectangle that looks like a credit card i think mine looks a little bit stubby so let's just round those numbers off 450 by 280 potentially now let's just center that perfectly you can either click on these little nodes to bring in the border radius or you can adjust it over here so let's just round it off to 20. now let's click on our fill change it from solid to linear change the direction of this gradient whoops let me just grab that there we go now it's being a bit disobedient today so here we go click on the first click on the starting point of the gradients change it to white change the other end change the end point to white and let's set the starting point to around 60 and feel free to play around with this there's no one way to doing this and then set the end point to around let's say 20 percent so you get a bit of that nice transparent look on this card already so that's looking quite nice then what we want to do is we want to add a stroke to this so head over to stroke in your design panel hit the plus change the black to a white and you can see that we already have a nice little glisten around the card maybe a little bit too strong so let's turn that down to potentially 20 percent and you can see you have a nice little glisten around there you can maybe bump it up to maybe 30 if you want as well now there we go so then what's the third thing that we're going to do what we want to do is we want to now like add a bit of that blurry effect when this card is on top of some sort of element so you can see in this gradient there is a bit of a sharp curve here so if we move this over nothing really happens but what happens if we add a effect and then we change drop shadow to background blur and we change this to around 20 so the blur will actually blur the background as you can see right there you see that beautiful that's exactly what we want guys um so move that back up and then what we might want to do is also add a bit of a shadow so head over click on your rectangle click on the plus icon under effects make the drop shadow let's have a play around this let's make the blur 20 let's make the y-axis maybe around 20 as well and then let's make the opacity let's say five percent we're going to even make the blur maybe 40 just make it a nice boom type of shadow yeah there we go it looks beautiful right there so that's pretty much it but there is still one little trick that i'm going to share with you guys if you want to create some sort of credit card looking effect and you want to put some text onto it how do you make it not look look flat so let's hit t on our keyboard let's put in whatever text we want here let's say the credit card is for msco media all right let's change the fill of the text color to white and you can see it looks a little bit flat what can we do so if the light source is coming in from the top left where should the shadows be pretty much down below the musical media should sort of offset a little bit of a shadow so what we are going to do is let's go to effects hit the plus icon hit the drop shadow let's make it make let's make the blur two let's make the y axis one you can see it's a little bit of a shadow there now so let's just leave this at maybe 30 percent let's zoom out and see does it look like it comes up a little bit perfect that's exactly what we want guys exactly what we want so if you appreciate the exact formula to creating this perfect glass morphism card feel free to gently smash that like button so command d or control d if you're on the windows let's just move a little bit of text down here and let's put in some fake numbers i don't guys what's your favorite number my non favorite number six so six six six six six six six six six six six six six six six six all right guys that's it let's just move this up a little bit perfect and pretty much that's what you want to make it look like all right so feel free to make this a little bit larger maybe make that 18 feel free to play around with it but here you go you have made and created your very first glass morphism card that looks stunning so guys if you appreciate this very quick tutorial please gently smash that like button and i would love to know where are you going to be using this effect in a design oh and by the way if you want to make sure that this effect really does incline words pop you want to make sure that you have a nice little blurry gradient in the background and that's the reason why i've used this effect these gradients is because it really does reinforce and bring through that nice glossy looking feeling so guys my light just ran out of battery but hopefully you guys enjoyed this tutorial and be sure to stick around to the end because youtube will probably most likely recommend you another video that you will find very insightful and very valuable all right guys i'll see you in a video very soon [Music] you

Channel: Mizko

Views: 44,352

Keywords: glassmorphism, figma tutorial, ui tutorial, ui design trends

Id: hKwCQNuomu8

Length: 7min 25sec (445 seconds)

Published: Sun Mar 28 2021