Create a Modern Glassmorphism Card in 4 Minutes | Figma Tutorial

In this video, I'm going to show you how to create a modern glassmorphism card in Figma.
You can download the background here👇:
bit.ly/3QvmskX
👉 Become a UI Designer with my UI Design & Figma Mastery course:
bit.ly/3WE9Qe7
👉 Get my FREE UI/UX Design e-book here:
bit.ly/3MRfDrz
📸 Instagram: / uiux.arash
Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7+ years of experience, and I teach people how to design great user interfaces and experiences. I've helped over 30,000 students become UI/UX designers from scratch worldwide.
#figmatutorial

[@MrConway007]

Hi Arash, Thank you for creating this well-explained tutorial at a good pace that made it easy to follow along with!

[@DesignWithArash]

Hi. No problem. Glad you liked it.

[@missfrills]

Another great tutorial. Thanks, Arash!

[@DesignWithArash]

My pleasure! Thank you.

[@linzee18]

your videos are always helpful , thank u Arash !

[@DesignWithArash]

No problem.

[@hunskjaer]

Loving your tutorials. Please keep doing small cool things like this video :)

[@DesignWithArash]

Thanks, will do!

[@Yenuix]

It Was a great and understandable tutorial, Thanks Arash!

[@DaveAndreu]

You should make the Figma files available to the community :)

[@ewelinakurtys1161]

Excellent tutorial, very well done :)

[@mojisolaotusheso8135]

concise and well explained!

[@DesignWithArash]

Thank you.

[@acreations2813]

Thank you but you didnt add the link for the visa logo

[@Silhouette_one]

Thank you! Which keyboard shortcut are you pressing for padding? @3:21

[@morgan.shaffer.design]

very cool!

[@bart_exe]

Excellent video! What shortcuts do you use to adjust padding? It looks so simple and effecient, but i cant understand how

[@DesignWithArash]

Thank you. Just use the arrow keys on your keyboard.

[@benetnasch_alkaid]

nice and simple!

[@DesignWithArash]

Glad you liked it!

[@gorangratte2471]

Can you achieve the same result with a frame instead of a rectangle for the card shape?

[@DesignWithArash]

Yes, you can.

[@william2603]

Hi Arash! How do I export the file with the size of the card? Thank you!

[@farshadamirshoghi9323]

Thank you dear Arash , it was useful

[@DesignWithArash]

No problem.

[@nooshinvahidi-f1o]

perfect👌👌👌

[@DesignWithArash]

Thanks.

[@Ajadi_kun_]

Thanks

[@netservicetech1681]

good work boss

[@DesignWithArash]

Thank you so much.🙏🏻

[@BebraGaming]

Visa logo how add in figma🥴

[@_hello_designer]

Too creative

[@fellowboy-l8p]

Where should I get those logos ?

[@wanghao8928]

wow this is good

[@DesignWithArash]

Thanks.

[@oluwatominsinmistura773]

Hello Arash!
What plugin did you use in getting the visa logo, I tried unsplash, it keeps saying can only be inserted in a shape
Please assist

[@DesignWithArash]

Hi Oluwatominsin,
I didn't use any plugin for that. I looked for the PNG file on Google.

[@feshfeshe]

please tell us how to fix padding

[@thaole-cv6qb]

Hi, my file doesn't show left, right, bottom or top padding between the text objects and the card margin. How can I set exactly specific padding like yours?

[@All_might-]

hold option key on your keyboard and hover your cursor over the object then you'll be able to see and set.

[@vihalkaviyarau9044]

Hello! I can't see the padding digits even when using the arrow keys. May be it is removed in current version, so how to do that. Please tell me Arash bro.

[@rusty.cyborg]

Same question here too

[@englishbyelham7829]

Thank u

[@DesignWithArash]

No problem.

[@babaop3913]

when i export it the icons such as visa does'nt appears

[@SubhashreeDesgin07]

Very nice sir

[@DesignWithArash]

Thanks.

[@luckypawar7304]

Is Aoutolayout complasry for job or not

[@DesignWithArash]

As a designer it's a must to learn Auto Layout as it helps you make your components responsive.

[@abdullahallsifat5056]

Damn ! you just Awesome 🩷

[@ziademad3938]

Please arash how can I find this second icon ?? What should l write in search?

[@DesignWithArash]

It's the NFC icon.

[@ziademad3938]

Thanks 🙏

[@saikiran6392]

@@DesignWithArash where to find

[@chisomezeakunne2451]

What the name of icon that came the visa logo ?🙏

[@AbdullahAsim-v8k]

nfc

[@mahmoudrezamohammadnejad8286]

Hi Arash , May write me how can i export card ? Only card because when i export include background and card together .Thanks

[@DesignWithArash]

Hi. When you use the Background Blur effect you cannot export it without the background. That's how it works in Figma.

[@nickname_life]

Hi Arash, wrong link is provided of unpash image to download it

[@DesignWithArash]

Hi. Thank you for letting me know. I fixed that.

[@ambientsoul6210]

dadash dastet dard nakone karet doroste mashti

[@DesignWithArash]

Ghorboonet.

[@UnderRAtedKid]

nice

[@DesignWithArash]

Thanks.

[@vihalkaviyarau9044]

Finally when I was moving the glass card the content remained in the frame1 instead of moving along with the glass card. How to make the content move along with the card. Anybody kindly give me the solution for this.

[@yanalotia2488]

Group them

[@tarlajane5572]

PLEASE I HAVENT RECIEVED THE MESSAGE IN MY EMAIL CONCERNING HOW I CAN BE SUBSCRIBED TO HAVE THE FREE EBOOK

[@magn8]

Video 4 Done - 23/09

[@mdspx]

Hello, can you give a tutorial about animating blur? I've been trying lately and from 0% blur to 30% blur, the animation is not smooth, it just change in the last nano second after the animation is completed.

[@DesignWithArash]

Hi. I'll keep that in mind.

[@georgezorbas9036]

You didn't say if we should frame all the objects!!!

[@ELBEKISMOILOV-o1k]

NOT UNDERSTANDABLE. SOME FAST

[@DesignWithArash]

Sorry to hear that.

[@ELBEKISMOILOV-o1k]

WE will wait new lessons for beginner@@DesignWithArash

[@Ariz67edit]

He is using ai person for video

[@Akshay.7S]

Can you please teach much slowly🙁😤

[@DesignWithArash]

I'll try my best.

[@Sagarika_here]

You😂can do it playing the vedio in slow mode

[@lewpaul6310]

You can pause video, do the exercise, then continue.