Animating liquid fab buttons in figma
Вставка
- Опубліковано 4 бер 2023
- Animating liquid fab buttons in figma
---------
Share your thoughts in the comments! 👇
---------
👉 Video Credit / Author: / zanderwhitehurst
👉 Brought to you by: / creativewebelements
---------
👉Want to learn more about UI/UX designs?
❤️ Subscribe to Us For Daily Guides and Inspirational Videos
@creativewebelements
---------
❤️ Follow Us For the latest Printing Products!
/ creativeprintelements
---------
👉 Follow Us For Daily Ui/Ux Tips!
/ creativewebelements
---------
👉 Follow Us For Daily Marketing Tips!
/ creativedigitalelements
---------
👉 If you find this helpful content, tap the ❤️ icon, share, and consider giving [ / zanderwhitehurst ] a follow. Thanks!
---------
#cwe #creativewebelements #ui #ux #uiux #uxui #uidesign #uxdesign #website #figma #adobexd #dribbble #uitrends #webdesign #uitips #designtrends #behance #uiinspiration #designtips #uiuxdesign #uxinspiration #userexperience #websitedesign #userinterface #uiuxdesigner #interfacedesign #userinterfacedesign #uxprocess #uxdesigner #webdesigner #uxprocess
---------
if you have any problems or any queries mail us at: creativewebelements@gmail.com
How to make ur developers hate u super fast😂
Reall
You don't know what you're talking about lol
Each SVG button has its own ID so I don't see how any developer would have issues with this
@@covalentbond7933he not said about issues, he said about hated and complexity
One more thing. You dont get it dont you (jokes)
@@covalentbond7933 So what exactly do the IDs do in calculating that actual liquid effect? of course its easy to move circles around but that liquid effects are by far not as easy. Except there is an package I don't know of :P
STOP YELLING AT ME
R E T U R N T H E F A V O U R !
developers are crying in the corner.
I am a dev. And I like it. Cuz I am a graphic designer as well. :)
We are, it's true. Designers with lack of knowledge regarding development code it's a cringe reality.
I started by looking up what Figma was… As a developer, then, I looked up if there was a way to convert to code cause I sure as hell ain’t gonna code that-
It's awesome❤
That's How to confuse your subscribers.
Need to keep in mind when doing UX stuff like this. When you pass it over to devs it's potentially going to be a bitch for them to code.
a fun UI designer is a devs worst nightmare 😅
@@nitzshou5835 but eventually you are going to figure it out, right? why don't you learn it beforehand then?
@@uimassthere is no such thing as learning before hand in programming, just copying someone else's code
@@nitzshou5835 creating animations in a design tool is a waste of time if they can't be exported. You're unlikely to be able to replicate a hack like this. If anything the design makes it more difficult to create the animation
I love the voice over 😆
Nice now do a tutorial for how a developer will build this.
Already did
fucking lazy devs everywhere nowadays
I will try this with CSS and HTML using multiple filter layers
Comment back here if you succeed. Good luck!
@@azazella8399 no I failed!
@parthrathod2607 ah, it'd be pretty difficult to replicate in CSS, but that would have been so interesting to see. Do you think using js would have helped with that?
Wow🎉 this is cool
how can you move the icons behind the big circle so they dissappear when you move them behind it, while the icons can't be inside the group because of the layer blur effect?
put the invididual smaller circles in they;re own group.add the icon in each corresponding group.
😮😮😮❤
How will I code this ?
What if I want a different color other than black? With lighter colours, it becomes invisible and with like, dark brown it becomes yellow
Matlab?@@sabkamalikek8022
same problem, if you have another color the result is bad. also with a gradient
I love it, but how to make this responsive ?
Credits:- memorisly
Is there a way to transfer this animation to framer?
Sangat menarik penyampaiannya
where did u got this icons)?
Ctrl G is Group in Windows
Now i know the reason why the heart attack rate of developers are increasing... 🤕🤣
i like to use these guides as a fun thing to do in figma. but I won't use this if i made the real thing 😅
how can you use this with different background
Figma Balls
Please how do I add my plugins?
Ok now show me the code please
Can't it be made in another color?
how to attach icons ? to have the same effect
click on the icon and circle while pressing ctrl+G. this is how you attach one to another
yes but it selects all icons and even the rectangles which he added@@dianadumitriuceramics1551
wow…
Did he say ligma??!
And our developers didn't even bother to replicate the animation I did back then 🤦🏻♂️
RETURN THE FAVOUR 😂
Those of you crying about this being a nightmare for developers, whatsapp currently uses this effect on the add text status button.
then how you turn that into code?
What is the point of creating animations in a design tool? Can you export it to mobile/web?
Bro how’d you duplicate the small circle when it’s already grouped? Idk how to iso 😭
Select it from the layers panel first and then you are good to go.
the whole animation looks blurry help please?
I have problem inserting the icons. Because anytime I tried to move the circles inside the button. It won't move the icons with the circles
Group them first
no one understand with ur explaination
agree
Yesss😢
it wasn't just me then
I remember you
I cant figure out how you’re able to click and drag the circle even though you’ve got two rectangles on top of it. When I try I end up clicking on the rectangle since it’s on top, and I can’t figure out a way au around it. Please help
Try selecting it from the side bar and then you can drag as you wish
maybe you should block the two rectangle first
@@linhkhanh4256 Lock*
I watch this every now and then only to hear your accent
Bro I am doing but it's not done as perfect as your can you please help me out to get this
Increase layer blur to 80 something
As a developer, i'm not working for this.
How do you translate this into code?
yes
Just make it a lottie.
With tears ?
@@yen-8680LOL
It’s not working 😢
Front end developers:😭😭
Headache for front end mates
Just kidding
Suppafast
command G layer blur? how to layer blur
@@vmyk3 thank you so much
the only interesting part of this clip is the liquid "fab buttons" technique(color-dodge / color-burn on a blurred layer). Everything that follows is complete and utter nonsense. He doesn't show it but the big circle has it's own animation tied to it on click
Bro can you do it in Windows system
The commands in Figma are the same for Windows and Mac
Replace the "Command" key with "Ctrl"
its unique but not useful even the tutorial is supafast make it hard to understand lol.
most people cant figure how to hide icon because if its put below circle it will be blured
Worse way to explain, not understand 😕
Sunai de Raha hai behra nhi huuu
😂😂
as someone who designs and develops, i can bodly say a lot of developers are freaking lazy man! that's why the ones who really are up for challenges like this make a lot of money.
holy shit this is hardly a tutorial
what did you just say