Claymorphism in Figma Tutorial
ฝัง
- เผยแพร่เมื่อ 20 ธ.ค. 2021
- So many messages asking for this, so here it is! In this tutorial I'll show you how to create a claymorphism style UI illustration, using some extra images from www.icons8.com, Figma and 10 minutes of your time.
Learn how to create those illustrations, as a nice way to explore a new design trend and potentially incorporate parts of it into your other designs - be it in Minimal, Modern Minimal, Glassmorphic or other styles.
Let me know what you come up with!
#claymorphism #figma #tutorial
==COOL INFO HERE 👇 =======================================
🎬 GET MY UI COURSES:
gum.co/uicourse
gum.co/uicourse2
gum.co/uipresentation
gum.co/uicasestudy
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 - hype4.academy
🌍 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, user experience, growth, marketing, life and mindfulness. Subscribe to stay in touch. ❤️
=========================================================
Wow you always make it look easy, loved the last “pressed in” effect on that finger.
Glad you liked it! I always try to go a bit outside of what's expected, even with just one little, blurred oval ;)
This is great; thank you so much for sharing it! Lovely job and lovely effect.
Thank you! Cheers!
This is beautiful! And gives me ideas for so many projects. Thank you!
Awesome! Don’t forget to share what you make :)
Thank you for the tutorial!
I'll add one on dark mode next week to wrap up this trend for now :)
Thank you, your videos are really useful
Czekam na więcej 👌🏻 leci sub i dzwonek!
Jesteś czarodziejem, dzięki!!
;)
Thanks Michał! I was postponing learning how to use Figma. Well...to be honest I opened it once and felt bit overwhelmed so I've been shying away from it ever since 😄Now I feel inspired to play around with it and maybe try to recreate this 😊
If you want to learn Figma I have a "Figma Playground" video on this channel that's a better starting point, and then sure - this tutorial is simple enough to be the logical second step.
Those apps are easy once you realise that for most tasks you only use a couple of features and also how similar they are to interfaces of powerpoint or keynote.
@@MalewiczHype thank you! I will definetly check it out!
As always, great video :)
Glad you enjoyed it! Had a different microphone because I'm travelling, but hopefully the audio is sort of good ;)
@@MalewiczHype yeah, it was fine to listen :)
Thank you
You're a great designer!
Thank you! Cheers!
How I usually create the 'bends' in Figma is by expanding the border-radius option and going 100% on corner-soothing.
This way you're limited to some point than doing it all manual, but I think is enough for the effect.
Great video though! Cheers :)
Good tip 🙌
Just adding: Rounded corner smoothing also helps with the claymorphism aesthetics.
True! I still really prefer how Sketch handles vector shape editing. That's one of the reasons I'm not a fan of Figma.
I feel that thanks to you I will be successful in the future 😊💪 Thank you Michał 🤝
You'll be successful thanks to your great attitude, not thanks to me :) I can be a small nudge in this, but it's all in you 🚀
@@MalewiczHype Attitude leads to 100% if A=1, B= 2... Z= 26 😇
@@MalewiczHype I spend 10 hours every day on ui / ux. I create simple pages with my friend on a daily basis. friend is programming. it is possible to live in Colombia, but I want to develop more 💪😁 So far I am at the stage of learning. and your channel and your UI courses are my top 1. I love your materials and as I mentioned you are my mentor once! You motivate me and give me specific knowledge where I have nowhere found anyone else 💪 Thank you. And think that I was looking for just a book about UI through google and discovered you 😅💪☯️ Karma
Happy to hear that, it's what motivates me :)
We need a lesson on how to use the new features in Figma, and thank you very much
How did you get the emoji on figma. Also, the icon you got from icon8, what's the name
Great tutorial bro
From India
Thanks and welcome
That is a gorgeous style. I've been toying with something similar - if only just for fun - because I actually really liked neumorphism and was sad to see it dismissed and fading into obscurity. Definitely will get back to it now. For extra fun, I might try to recreate the hand graphics with CSS or SVG.
Speaking of which: why do UX folks swear by PNG exclusively? As a PageSpeed cultist I was raised to believe the only real choice for photos is between WebP and optimized JPEG. While I did read on the negligible speed/performance differences between the three - and while PNG is my prime choice for non-web graphics - I've seen UX-centric devs make rather curious choices, such as coverting SVG into PNG or using heavyweight animated GIFS where an animated SVG filter would do the job with just a few lines of code. Is there some key factor I'm missing, other than the emphasis on performance on the client's device rather than bandwidth usage?
In most cases WebP images and JPG look horrible. Loading speed is important, but not the ONLY factor as some people think - it has to look sharp and good, not pixellated as that also breaks the experience.
Of course if something can be done as SVG (and that includes animation) then it definitely should :)
@@MalewiczHype Ah, I didn't really consider this would still be an issue in this day and age. Is it possible it's just a bias on principle alone and the flaw is projected onto the image by sheer force of conviction? Because I don't really see the issue. True, I might've gotten desensitized due to all the aesthetic trauma from JPEGs, MPEGs, RMVs and other poorly compressed nightmares of yore that I'd sufffered through in the 90s and 00s. And yes, codecs aren't perfect today, either; case in point: what TH-cam's native codecs do to colors is still making my heart cry, every time. But in my eyes static images seem to maintain a bearable quality even at 80% or so. Of course it all depends on the level of complexity/detail of the image, and the photographer's gear and skill - but still, it isn't painful for me to look at unless zoomed way in.
Is there an app using this style that you know of?
For DEV: Would you need to use clip-path to implement the shape 'bend'? Or is there some other magical way to pull this off in CSS?
For now we've been mostly experimenting with SVG as code inserted into a generator, but there may be some other ways to still test.
However, that bendy effect is extra, just the inner shadow often is enough to give the right illusion.
For a simple variant of this you could use a combination of:
border-radius: calc(50% - 20px);
/* sample values, adjust as necessary; the basic idea is that percentages create an elyptical shape rather than round corners, and subtracting from it flattens the arc*/
box-shadow: 0 0 0 40px white;
/* again, a sample value; either way, a thick box shadow rounds out the corners*/
It's still crude, and you can only bend either the horizontal or vertical edges, not both.
A similar result can be achieved in SVG by adding rx and ry to a rectangle - the only difference being that adding a thick stroke rounds out the corners much more nicely than box-shadow or borders. But for the fully realized horizontal and vertical bends and rounded corners a proper d path with carefully calculated bezier curves would be necessary. Beziers aren't super difficult to calculate, even manually, and there are certain hepful constants to help out with the calculations - but still, everything depends on widths and heights of your particular shape.
Please how did you get the emoji
Can i get the link of the Icons bro
Hello! Can you tell me what figma plugin you use for emoji at 5:24 ?
I can`t find it...
It's not a plugin. Mac OS has a native emoji picker like that in the system.
@@MalewiczHype thank you
Could you give it to the quick link with these hand icons? I cannot find. Thank you 🙏
ohhh i got it icon8 🙈 Thanks !
:)
I kinda cant seem to see how or if I should implement that into anything that is not for children? :) Any Suggestions/thoughts?
I think it's good to explore creative options and new visual trends to reflect change in interfaces, be they physical or digital. However...
10 minutes to create a box and button, or 10 seconds to do the same with standards that code natively supports? Is this really worth the incredible pain it creates for development? Can we definitely say that users are going to have a significantly better experience at the cost of creating irregularity that goes against pretty much all established graphic design standards that we know work?
Definitely! But this is not a trend to overtake all the interfaces, it's rather something to possibly incorporate into a product that it fits.
+ The inflated shape itself is not necessary, in some cases two inner shadows will be just fine.
It's possible to do with svg's though and not even that difficult to code ;)
Hey from where did you download those 3D hands?
Icons8
But where do we use Claymorphism? Is it really usable in real projects?
Not in all projects, but some more consumer oriented startups with a friendly vibe could have a couple of shapes inflated like that.
Can this work for dark theme?
Yes, I showed an example in the style introduction video :)
Does it bother anyone else that the right hand emoji is on the left, and then there's another right hand holding the card?
Anyways, really cool design example, thanks for sharing!
Haha great catch! :)
how to break the pen in 0:55 bro ?
God I hate this trend. Absolutely cursed
I'm just reporting on it, not pushing any trend. But out of the recent ones I'm hating Brutalism a bit more than this still ;)
We need a lesson on how to use the new features in Figma, and thank you very much
What new features exactly?
@@MalewiczHypeAuto layout button - Components - ...... this not new