Glassmorphism UI - Free Figma Tutorial - 30 000 designers took it!

hey guys so many of you have asked me to create a figma tutorial on glassmorphism but instead of just playing around with random shapes uh you wanted me to make something more real and of course i would have preferred to do it in sketch but many of you have asked me to actually do it in figma so here we go so what we're gonna do here is one of the most common uses of glassmorphism which is basically a credit card shape something like you see on the screen right now so let's start by creating a new artboard and i'm gonna go a little freestyle here so i'm not gonna recreate the image on the left exactly as it is just gonna do something pretty similar let's start by creating a rectangle for our background now let's do a linear gradient from an orange very light orange color to some pale purple now that gradient is gonna go from top to bottom but it's gonna be a little bit too boring for a glass morphic background so we need to spice it up a little bit and here is a nice trick let's create a circle and change the color to some darker orange hue it needs to be desaturated enough so it will blend with the background nicely now let's duplicate it and pick another color now the trick is to select those circles and add a layer effect called the layer blur and i'm gonna add it at 150 here and then you can move those circles around make them larger or smaller to actually fit what you're looking for you can also duplicate those blurred circles make them smaller and at lower opacity to create an even better blending version so once you decide on your own colors for the background let's create our first shape the main shape of the credit card and i'm just gonna make a roughly rectangular shape here but of course if you like you can use the proper credit card proportions i'm gonna start by changing the corner radius to 32 for nice rounded corners now the trick for those portfolio-ready credit card shots is pretty simple you just need to use a radial gradient and pick white color on both sides now drag one of the colors to the top left of our card and then diagonally drag the other one to the bottom right now change the faded one opacity from 0 to 10 percent and then change the opacity of the other color from 100 down to about 70. now select the object and decrease the opacity of the entire fill so next to the radial it just says 100 change it to about 60 or 70 percent just make sure the layer opacity just above it is still at 100 and then you can go to effects and add a background blur of about 12 to the card now this is starting to look very classmorphic already but you can also drag our blurred circles from the background to actually make the effect of the background blur on the card even more visible it's all about the subtle tweaking to achieve the right effect now select the card and let's add a stroke to it but make sure to change the color to white and also make sure that the stroke is on the inside of the shape it's important because the simulated glass edge that we're making here needs to blend with both the background and the card at the same time now go to the stroke opacity and change the value from 100 to about 30 percent now that border is already blending in with the card pretty well but we can actually blend even more so open the color palette click on that little drop and choose overlay now let's add the colorful bottom part of the card so i'm just gonna create a rectangle near the bottom of it then i'm pressing enter to be able to select just the two bottom corners and i'm gonna change their border radius to 32. that way it matches the rest of the card nicely now let's fill it with a linear gradient and let's make it horizontal and then pick three colors instead of two and i'm just gonna pick a nice uh passage between a blue and a purple with another blue in the middle now we want the cart to be actually visible and floating in the 3d space so normally it would be just adding a shadow right but when you add a shadow to an element that has a background blur it kind of gets uh blurry in the middle as well because the shadow is under the entire object so let's not do that let's hide that shadow besides we want a shadow that's gonna look a little bit more natural and a little bit more 3d so it's not going to stick from the entire object so i'm making an ellipse and i'm filling it with a dark color here now go to effects and add a layer blur to this ellipse and i'm going to put it at 40 for now now if you leave the shadow like this it will create the illusion that the card is floating in 3d space so you can then modify the color of that shadow to actually match the background and the bottom of the card as well but i'm just gonna move it closer to the card and obviously move it lower on the layer palette as well so once the blurred shadow layer is underneath the card i'm gonna move it back up and then i'm gonna change the color to something a little bit more blue so a little bit of that blue actually is reflected in the shadow but i'm gonna make it tiny bit darker now let's start adding some text like the name of the bank in the top left corner now we can duplicate that and move it down to create the credit card number and this is 16 characters so you just need to create four groups of four and a word of advice just don't put your real credit card number in there i mean come on i also made this font a little bit bigger and then the letter spacing i'm gonna increase until the number is about three quarters of the entire card now duplicate the top text again move it down and write in your name and yeah you can use your real name here that way it's gonna be your personal project okay let's move it to the bottom of the card and then let's change the color to white and if white font doesn't have enough contrast with the background gradient you may need to modify the gradient a little bit to make it a little bit darker so the font is going to be visible now duplicate that font move it up and let's create the expiration date of the card now i'm duplicating that font again moving it up and typing valid through because that's what they mostly say and then let's decrease the font size so it's really small it's just a label so it's not really that important i'm just gonna do a couple very quick alignment tricks but then i'm gonna align it more precisely later to make those white fonts pop a little bit i'm just gonna add a dark blue shadow to them that's pretty close to the font now let's create the card issuer logo and let's not talk about brand names but it's just gonna be two circles you know it's probably just a pretty random logo right but while making the circle just make sure that the distance from the bottom and from the right is pretty much the same as the diagonal distance because if the diagonal distance is different than the right and the bottom one it's just gonna look weird like this and we didn't really want to have this effect or this so let's just align it evenly right now i'm going to copy the properties of this entire glass card now and i'm going to paste them onto that little circle now i duplicate that circle move it a little bit to the left and then we can play around with turning off the border and then playing around with slightly lower opacity okay that is looking way better already so now let's work on the fonts a little bit because the white phones look pretty okay but then the black phones are not really fitting the style of this so for the bank name i'm gonna pick a color from the background that's a little bit darker than the background obviously so it's visible and for the card number i'm gonna go with a linear gradient from top to bottom from one dark hue of blue to another and also just in case i'm gonna make the font slightly thinner here okay it's looking good but to make that frosted glass effect more prominent we need some shapes in front and behind it to make it pop so i'm just creating a circle here and changing the gradient to linear and then picking two pretty light colors just make sure that the darker color is on the bottom of the gradient because that's gonna make the ball look a lot more natural and it can be a little bit diagonal as well now when you move that ball underneath the card you're gonna start seeing a little bit of that frosted glass effect but if you want to boost it a little bit you need to modify the gradient of the ball so i'm just gonna make it a tiny bit darker now the trick is to duplicate those balls and make them smaller and larger and place them in strategic positions it may take a while to find the right fit for all of them but it's really worth it but now to make the fact that this is like a 3d simulated image we need one more of those balls in front of the card so i'm gonna place it on the right side here make it a little bigger and place it in a way that it overlaps both the frosted glass and the colorful gradient at the same time so let's use our blurred ellipse trick to make a shadow of that ball that casts onto the card and if it's too prominent just move it further under the ball okay this is gonna be a very quick alignment exercise and it's not gonna be perfect but it's gonna be fast so i'm just creating a space on the left side along the left edge and i'm changing the color to red and then i'm gonna use the same space from top and the bottom of every object inside the card and at this point when you have elements in the background you can also modify the background blur of the card so i'm decreasing it to seven to see how the balls are gonna look underneath and of course you can also move it higher or lower you can also duplicate that shadow with much lower transparency to make the illusion that the card is actually casting a shadow onto the balls that are under it just don't make it too strong otherwise it's gonna bleed through the card and it's gonna look pretty weird and at this point when we have our card practically ready you can play with any of the values so you can modify the transparency the background blur change the size and position of the shapes in the background or as in my case i'm just gonna modify the gradient a little bit and there we have it that's a glass morphic card in figma with some shadows some background effects and a pretty nice overall soft vibe and you can of course play with this even further you can duplicate those balls in the background and make some of them blurred that's gonna create the bokeh effect and it's gonna make it look even cooler and obviously while doing a tutorial like this try to use your own colors and your own patterns and your own shapes in it so that's it for today thanks for watching don't forget to like subscribe and share the video and i'm gonna see you guys in the next one cheers you

Channel: Malewicz

Views: 72,824

Keywords: glass, glassmorphism, neumorphism, skeuomorphism, glass morphism, glassmorphism tutorial, glass UI tutorial, glassmorphism figma, sketch, adobe xd, tutorial, glassmorphism in figma, glassmorphism ui, ui, ux, design, ui design, ui design tutorial, ui tutorial, figma tutorial, glass morphism ui, glass morphism figma, figma, figma ui, adobe, glass in figma

Id: uRVnX0k593E

Length: 10min 39sec (639 seconds)

Published: Mon Dec 14 2020