How to Create Glass Card Effect - Figma Tutorial

[Music] creating great looking glass effect may help make your design more modern and attractive this figma tutorial will show you how to achieve high quality glassmorphic design quickly let's recreate this design if you look for sketch tutorial click the link in the description below first draw a simple shape to make it look like a real card set dimensions to 640 by 400 and set corner radius to 40. apply the fill to achieve a bit more stylish appearance use the gradient both colors should be wide but set different opacity levels we are ready to apply the blur background blur is a perfect effect to achieve glass surface set the value to 20 or 40 to create nice effect you may also play with different values to adjust it to your needs now add some stroke to create borders they help to establish better visual hierarchy use gradient to create additional illusion of depth let's add shadow to strengthen the visual hierarchy subtil shadow will help to distinguish all the layers i used pure black color in this example with blur value 24 and spread -1 it is time to add some content fill it with necessary logos or text to create additional illusion of a printed layer fill your content with white color and change blending mode to overlay optionally you may decrease some opacity your glass card already looks good however there is a bonus tip that adds additional polish to your design let's add some frost to make it we have to add a little noise over the layers i used noise plugin that helps to create nice looking effect quickly [Music] set the blending mode of the layer to overlay decrease opacity and your frost effect is ready final result is quite impressive as you see adding some glass to your ui design is quite simple thanks so much for watching i hope you found this useful don't forget to click subscribe you may also find me on uxmisfit.com see you soon you

Channel: Thalion - UX MISFIT

Views: 309,452

Keywords: figma, glassmorphic, tutorial, uidesign, glass effect, sketch

Id: 8UWkR1H5E4o

Length: 3min 34sec (214 seconds)

Published: Tue Jan 05 2021