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

[@gabreyes9793]

This guide is so good, I learned not just glassmorphism but also other valuable techniques. Thank you!

[@MalewiczHype]

Thank you! There are more videos with those mini design exercises on this channel too! Glad you liked this one :)

[@jessicamoura1137]

This is great! You should be getting thousands of views for this! :)

[@MalewiczHype]

Thank you 🙏 But I’m just starting on youtube, new here, so I need to earn those views 😎 Glad you liked it.

[@elizabeth4689]

you deserve a million subs for this!

[@MalewiczHype]

Thank you! Maybe one day 😅

[@ВалерияХоревич]

I TRY IT!So nervous,but look awesome!Thnx u!!

[@MalewiczHype]

Good luck!

[@YggdrasilReviews]

On UI Challenge number 7 thankyou for this, I already see major improvements in my UI compared to some of the assignments I did in the google course.

[@SamuellMinistar]

The processes were easy to understanding and you explaining made it that more enjoyable 🙂

[@MalewiczHype]

Great to hear! It's a nice way to learn some principles of background blur to be later applied in other, more real projects :)

[@figmawan9026]

Thank you for this awesome tutorial, this is the best glassmorphism tutorial I've ever watched. Subsribed!

[@MalewiczHype]

Thanks, maybe it's because I created glassmorphism ;)

[@figmawan9026]

@@MalewiczHype I'm sorry for didn't realized who is behind this glassmorphism style 😭 You are the best, now I'm your fan already!

[@ClassicLiza]

Thanks for a wonderful tutorial!

[@TheTravelHunger]

Cześć Michał! Dzięki wielkie za Twoją pracę! Dosłownie dziś natrafiłam na Twój kanał. Bardzo fajnie przekazujesz wiedzę. Jestem na samym początku drogi UX. Jestem w trakcie kursu z Google, a przede mną jeszcze kolejne. Twoje filmiki są bardzo pomocne. Dzięki. Pozdrawiam 😊😉

[@MalewiczHype]

Bardzo mi miło, o kursie Google mam całą serię na tym kanale - jeśli planujesz podziałać także z UI to jest tu też cała masa tutoriali, no i zrobiłem też swoje kursy UI, bo to co znajdowałem do tej pory w internecie wydawało mi się not good enough :-) Pozdrawiam 👋

[@letmesay2035]

i jak sie udalo?

[@maaaaaars]

The video helped me understand the concept with so much ease. Thank you!

[@Epicedits2555]

Amazing video bro, I learned a lot. You earned my subscription 🔥🔥

[@MalewiczHype]

Awesome! I share quite a lot of tutorials here

[@lengocchau1454]

Amazing video! It's condensed and covers a lot of tips and tricks. Thank you so much!

[@ZOE-nt9th]

Awesome tutorial!!!

[@MalewiczHype]

Glad you liked it!

[@--Franklin--]

*Hey Malewicz... A quick question... you forgot to mention how you created the slim edge white border around the transparent card! Could you guide me, please? By the way, I'm a new subscriber of yours😎 I'm really grateful for all your free tutorials and effort into it! Dziękuję Ci* 😊😊😊

[@riyamathili4656]

That's a stroke. You can find it in the design panel and adjust the colour, thickness, etc. Hope this helped!

[@--Franklin--]

@@riyamathili4656 You have my deepest thanks 😊

[@nigarhuseynli3446]

It was great to see the Red Square method in action! Thank you so much for this awesome tutorial :)

[@MalewiczHype]

Cheers! Glad you liked it! :)

[@deekshajsalian]

Thank you dude! This is amazing ❤️

[@MalewiczHype]

Glad you liked it! There are more tutorials on this channel :)

[@navedhasan4632]

Videos like this give me motivation to make more projects!!! Keep up the good work!!

[@MalewiczHype]

Thanks! There will definitely be more :)

[@danielazacarias2775]

i enjoyed this tutorial so much, very clear and also beautiful design

[@designmentor1443]

thanks Malewicz for such amaing free tutorial

[@MalewiczHype]

Happy to hear it helps :)

[@ellenithernandez9195]

Fun tutorial! Thanks!

[@MalewiczHype]

You're welcome!

[@meezansayyed3147]

Quality Content! ❤️👍🏻

[@MalewiczHype]

Thank you 😊

[@j.p.3513]

Thank you. Great tip :-)

[@darianrichardson9709]

This was amazing to watch!!!

[@MalewiczHype]

Thank you! :)

[@Hiiaamm]

loved it thanks!

[@ranger633]

Thanks for the great tutorial, it was really helpful :)

[@MalewiczHype]

Glad it was helpful!

[@TheKrisu98]

Polska górą!!!! Great vid buddy. Started to love Glassmorph design

[@MalewiczHype]

🇵🇱🌋

[@nastyaveres394]

Thanks! It was very helpful

[@charliepoiters5476]

Would love to see you recreate it with CSS

[@ayrtonart]

You are the best man. Very well explained, i did it.

[@MalewiczHype]

Glad it helped

[@gefenb]

thank you love it!

[@MalewiczHype]

Happy to hear

[@abirahmed1292]

Thank you and I didn't know about the copying properties of the layer, thanks for that too :)

[@MalewiczHype]

Happy to help :)

[@wowawewa]

That is soo great! Learned a lot from your designing)

[@heyyaa9867]

Thank you so much for this video, I have learned so much!

[@MalewiczHype]

Happy to help! :)

[@georgeyaacoub3493]

Well done 👏 keep them coming bro

[@MalewiczHype]

Thanks! Will do!

[@raniahermanto4570]

thank you so much, your videos are amazing and so helpful!!

[@MalewiczHype]

You're so welcome!

[@laughloudly4274]

Wow It's Really amazing thank you so much for sharing this video with us

[@MalewiczHype]

Glad you liked it 👋

[@DeepakKumar-bm2bx]

Amazing bro

[@MalewiczHype]

Thanks 🔥

[@princess_irulan]

Such a beautiful job! Great thanks!

[@MalewiczHype]

Glad you like it!

[@adityaprasaddhal2462]

This is really phenomenal 😍

[@MalewiczHype]

Thanks! There are more tutorials on this channel too 😎

[@TonyAdigwe]

Weldone. You made it look so easy to achieve

[@MalewiczHype]

Thank you! It actually is quite easy :)

[@nancyadaeze1901]

This is so beautiful. Thank you

[@alexisabakasanga]

Thank you for this tutorial, I learnt a lot from it👋🏽

[@MalewiczHype]

You’re welcome 😊

[@ledung1318]

Wonderful work. Thank you so much

[@MalewiczHype]

Let me know if you create something out of this :)

[@moyujiang]

Damn this is gold, i wish i see this ealier

[@abaddierey]

Beautiful 😍

[@MalewiczHype]

Thank you! 😊

[@maurojr19851]

Please do more videos, it is GREAT GREAT and GREAT!!!!

[@MalewiczHype]

I'm doing at least 2 videos per week, no worries :)

[@maurojr19851]

@@MalewiczHype thanks, can you please make a video on how to prototype in figma really step-by-step for beginners to understand please??

[@MalewiczHype]

@@maurojr19851 Hi, I have a queue of videos at the moment - prototyping is something I plan to cover this year for sure, but not sure when exactly. Plus I work primarily in Sketch, I really don't like Figma - only do it because many people request it but it's a suboptimal tool for many of the design techniques I use ;) In any case - prototying is on the list for this year, follow the channel so you won't miss it :)

[@maurojr19851]

@@MalewiczHype thanks a lot sir,, i will try to use sketch soon

[@ruzicaculina9342]

Is it good to put example like this in your portfolio?:)

[@wiselindev]

Thank you 😍

[@efesezenk]

Thanks man! I learnt a lot. =)

[@MalewiczHype]

Awesome to hear that, that's my goal :)

[@theloneranger1404]

buddy I think you should change the bg music, sounds kind of spooky :D

[@nicker3115]

The numbers font weight was same as the name of the bank and the user, which in the example wasn't,

[@voli1266]

bro, you can use alt to see paddding space insted of doing it with rectangles

[@MalewiczHype]

Alt gives you bounding box spacing, not optical one - the red squares are for optical alignement that works mostly with text. You can use alt for buttons and simple, self-contained shapes no problem, but if you want a perfect optical alignment it simply is not enough :)

[@Nailianna]

Jak zawsze quality content :)

[@MalewiczHype]

Dziękuję :)

[@ayayfayy]

OMG THANKYOU

[@Ruscne]

Thanks!

[@catslovestuff]

Hi could you make a inVision studio tutorial for this please

[@MalewiczHype]

Hi, not sure Studio has background blur (effect). And also as a product is feels a little abandoned now (which is unfortunate because I loved its animation features)

[@catslovestuff]

@@MalewiczHype Is there by any chance a different program that I can use that’s free, and doesn’t limit you to the amount of projects you can create and has the ability to create glassmorphism? Also thank you for responding

[@fernwehtwl]

this design is so beautiful but im wondering if its possible to code this by a developer. A lot of the designs i see on behance are beautiful but not realistic when it comes to coding it.

[@MalewiczHype]

It is possible :)

[@leonegan2704]

Thank you sir

[@alsoualsou9]

thx!

[@raymondfigoinuhan9504]

how that cirlc ecan be fit to the frame in corner why when i try it its still a whole circle

[@bradmacdonald6591]

There's always that one turkey who shoots a dribbble shot with their actual credit card number.

[@MalewiczHype]

I've seen people doing login forms and entering the password they use everywhere in the password field, right next to their own email. 🤷🏻‍♂️

[@MrBionik6]

Wonderful video, Thank you Michal. I guess the techniques are similar in Sketch 🤔

[@MalewiczHype]

Yes, the main difference is that Sketch can actually render a shadow under glass that doesn't "go through" and darken the glass. And then you can use the Sketch "Spread" feature to make it smaller. So it's a bit easier in Sketch really.

[@waattzup]

Thank you :)

[@ArjunYadav-xi1us]

Please make a video on export this design in Android Studio.

[@manjiripanchal6226]

Very nice great!!

[@maxdegreat566]

Do employers perform ppl who actually use html and css?

[@MMopinion]

How do u extract this and put it on the design screen

[@waqarbaloch5]

nice one

[@shivanikalkeri2370]

Hi I have a quick question about the video at 8:48 when you add a shadow to the circle it comes out so prominent, in my case I followed the same exact steps as you mentioned but mine is extremely faded out... not sure why!!

[@MalewiczHype]

Try to play around with the blur value, color and opacity to that circle, as the circle itself is a shadow. I haven't added a shadow effect, just a blur :)

[@sohanbhute7424]

Amazing❤️

[@carlalima8791]

Is there a way to make the bubbles float about

[@MalewiczHype]

Yes, you can create a keyframe based animation with two or three screens and just alternate between the states to animate the bubbles :)

[@carlalima8791]

@@MalewiczHype Awesome! Thanks

[@sby26]

Amazing u r !

[@video3592]

But my question is it that we have to do it in html css or figma directly

[@MalewiczHype]

in html and css. Figma is only to show how it can look to the developer.

[@kevine.167]

Which Programm Do you use?

[@MalewiczHype]

For all my professional work I use Sketch. For tutorials I use Figma because it's "kind of" free and most people are familiar with it.

[@volodymyrseverynenko1025]

Legend!

[@MalewiczHype]

Thanks :)

[@thisismaldives]

awesome

[@ytRap007]

thanks Malewicz amazingly great.

[@manojarokkiasamy4605]

awesome .... thanks

[@MalewiczHype]

Thanks! More tutorials coming soon :)

[@designvortex8429]

Dude make i look so easy. I ended up making morphing glass look funny

[@MalewiczHype]

Funny can be good.

[@sarcasticbabes]

Awesome

[@MalewiczHype]

Thank you :)

[@nrdfoss]

NIIIIIICEEEEE

[@ankit-pr2qh]

at the start you very fast when u were picking colours plz consider beginers too

[@MalewiczHype]

Will do!

[@jaylenfan]

Everyone Think this is not Possible in PowerPoint but I Did It

[@vuhere]

0:39 to 0:46 : Hack speed? Why? Is this not a tutorial?

[@MalewiczHype]

It is, but at the same time some actions are a bit redundant - if it's a gradient and there are two sides of it, you can pick them yourself too + I encourage people doing my tutorials to actually pick their own colors altogether instead of doing the same ones :)

[@fernandamiranda4402]

I love nice

[@Nishant_Shete]

Plot twist : it was his real credit card number.

[@MalewiczHype]

Damn, you got me 😂

[@Nishant_Shete]

@@MalewiczHype haha! Absolutely great content man💪🏻💯

[@baskerb7408]

ok, but very fast, please slowly explain

[@latifabulous]

thankyou!

[@MalewiczHype]

You're welcome!