Glassmorphism UI - Free Figma Tutorial - 100 000 designers took it!
Вставка
- Опубліковано 13 гру 2020
- ❤️ SUBSCRIBE to this channel and learn to DESIGN BETTER ❤️
==COOL INFO HERE 👇 ==================================================
MY BOOKS:
📘 Designing User Interfaces - over 500 pages all about design, likely the biggest source of UI knowledge in the world: designingui.com
🦄 Frontend Unicorn - How to learn faster, earn more and grow as a front-end developer: frontendunicorn.com
MY FREE UX COURSE:
👨🏻💻 Become a designer: • Becoming a designer
BE MY FRIEND:
💌 Sign up to our newsletter - designingui.com
🌍 My website - michalmalewicz.com
📸 Instagram - / hype4academy
✍️ My Medium Blog - / michalmalewicz
🐦 Twitter - / michalmalewicz
⁉️ You can ask me questions on Twitter, just @ me or DM :-)
ABOUT ME:
👨🏻💻 I'm a designer, entrepreneur and startup founder. I started back in the late 90's and currently my main goal is to share my knowledge, both paid and free. This channel is one of the places where I share my tips on design, growth, marketing, life and mindfulness. Subscribe to stay in touch.
=========================================================
You guys really wanted to see a Figma glassmorphism UI tutorial. The number of emails and direct messages was mind blowing! So here it is. This time it's not going to just be some random shapes, but something you can refine, play with and actually have it as a small visual design portfolio piece.
This tutorial is for Figma, but you can follow along in Sketch and Adobe XD as everything done here can be done in those tools. Only their UI is a little bit different, but you can achieve the exact same result in any of them.
Don't forget to also follow me:
michalmalewicz
hype4academy
And check out the best UI design book out there:
www.designingui.com
#glassmorphism #figma #tutorial
Amazing video! It's condensed and covers a lot of tips and tricks. Thank you so much!
The video helped me understand the concept with so much ease. Thank you!
This is great! You should be getting thousands of views for this! :)
Thank you 🙏 But I’m just starting on youtube, new here, so I need to earn those views 😎 Glad you liked it.
This guide is so good, I learned not just glassmorphism but also other valuable techniques. Thank you!
Thank you! There are more videos with those mini design exercises on this channel too! Glad you liked this one :)
That is soo great! Learned a lot from your designing)
Videos like this give me motivation to make more projects!!! Keep up the good work!!
Thanks! There will definitely be more :)
i enjoyed this tutorial so much, very clear and also beautiful design
This is so beautiful. Thank you
The processes were easy to understanding and you explaining made it that more enjoyable 🙂
Great to hear! It's a nice way to learn some principles of background blur to be later applied in other, more real projects :)
It was great to see the Red Square method in action! Thank you so much for this awesome tutorial :)
Cheers! Glad you liked it! :)
Thank you and I didn't know about the copying properties of the layer, thanks for that too :)
Happy to help :)
Thank you for this awesome tutorial, this is the best glassmorphism tutorial I've ever watched.
Subsribed!
Thanks, maybe it's because I created glassmorphism ;)
@@MalewiczHype I'm sorry for didn't realized who is behind this glassmorphism style 😭
You are the best, now I'm your fan already!
LOVE THIS! THANK YOU
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.
Thank you so much for this video, I have learned so much!
Happy to help! :)
Jak zawsze quality content :)
Dziękuję :)
Thank you dude! This is amazing ❤️
Glad you liked it! There are more tutorials on this channel :)
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 😊😉
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 👋
i jak sie udalo?
Thanks for a wonderful tutorial!
Such a beautiful job!
Great thanks!
Glad you like it!
thank you so much, your videos are amazing and so helpful!!
You're so welcome!
Thanks! It was very helpful
you deserve a million subs for this!
Thank you! Maybe one day 😅
Thank you for this tutorial, I learnt a lot from it👋🏽
You’re welcome 😊
loved it thanks!
This is really phenomenal 😍
Thanks! There are more tutorials on this channel too 😎
Thank you. Great tip :-)
Thanks for the great tutorial, it was really helpful :)
Glad it was helpful!
Wonderful work. Thank you so much
Let me know if you create something out of this :)
This was amazing to watch!!!
Thank you! :)
Wow It's Really amazing thank you so much for sharing this video with us
Glad you liked it 👋
OMG THANKYOU
I TRY IT!So nervous,but look awesome!Thnx u!!
Good luck!
Well done 👏 keep them coming bro
Thanks! Will do!
Polska górą!!!! Great vid buddy. Started to love Glassmorph design
🇵🇱🌋
Amazing video bro, I learned a lot.
You earned my subscription 🔥🔥
Awesome! I share quite a lot of tutorials here
Damn this is gold, i wish i see this ealier
Thanks man! I learnt a lot. =)
Awesome to hear that, that's my goal :)
Amazing❤️
Thank you 😍
You are the best man. Very well explained, i did it.
Glad it helped
Thanks!
thank you love it!
Happy to hear
Fun tutorial! Thanks!
You're welcome!
Weldone. You made it look so easy to achieve
Thank you! It actually is quite easy :)
Thank you sir
Thank you :)
Would love to see you recreate it with CSS
thanks
Malewicz for such amaing free tutorial
Happy to hear it helps :)
Awesome tutorial!!!
Glad you liked it!
thx!
Quality Content! ❤️👍🏻
Thank you 😊
Very nice great!!
Wonderful video, Thank you Michal. I guess the techniques are similar in Sketch 🤔
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.
Amazing u r !
Beautiful 😍
Thank you! 😊
Amazing bro
Thanks 🔥
The numbers font weight was same as the name of the bank and the user, which in the example wasn't,
Please make a video on export this design in Android Studio.
awesome .... thanks
Thanks! More tutorials coming soon :)
Legend!
Thanks :)
nice one
bro, you can use alt to see paddding space insted of doing it with rectangles
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 :)
thankyou!
You're welcome!
buddy I think you should change the bg music, sounds kind of spooky :D
how that cirlc ecan be fit to the frame in corner why when i try it its still a whole circle
awesome
Is it good to put example like this in your portfolio?:)
*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* 😊😊😊
That's a stroke. You can find it in the design panel and adjust the colour, thickness, etc. Hope this helped!
@@riyamathili4656 You have my deepest thanks 😊
Awesome
Thank you :)
How do u extract this and put it on the design screen
Please do more videos, it is GREAT GREAT and GREAT!!!!
I'm doing at least 2 videos per week, no worries :)
@@MalewiczHype thanks, can you please make a video on how to prototype in figma really step-by-step for beginners to understand please??
@@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 :)
@@MalewiczHype thanks a lot sir,, i will try to use sketch soon
NIIIIIICEEEEE
There's always that one turkey who shoots a dribbble shot with their actual credit card number.
I've seen people doing login forms and entering the password they use everywhere in the password field, right next to their own email. 🤷🏻♂️
Do employers perform ppl who actually use html and css?
I love nice
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!!
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 :)
Hi could you make a inVision studio tutorial for this please
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)
@@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
But my question is it that we have to do it in html css or figma directly
in html and css. Figma is only to show how it can look to the developer.
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.
It is possible :)
Which Programm Do you use?
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.
Is there a way to make the bubbles float about
Yes, you can create a keyframe based animation with two or three screens and just alternate between the states to animate the bubbles :)
@@MalewiczHype Awesome! Thanks
Dude make i look so easy. I ended up making morphing glass look funny
Funny can be good.
Everyone Think this is not Possible in PowerPoint but I Did It
Plot twist : it was his real credit card number.
Damn, you got me 😂
@@MalewiczHype haha! Absolutely great content man💪🏻💯
ok, but very fast, please slowly explain
at the start you very fast when u were picking colours plz consider beginers too
Will do!
0:39 to 0:46 : Hack speed? Why? Is this not a tutorial?
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 :)
thanks Malewicz amazingly great.