Animating liquid fab buttons in figma
HTML-код
- Опубликовано: 18 окт 2024
- 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 !
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-
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.
@@jkoblivion4175 Just get good, simple
I will try this with CSS and HTML using multiple filter layers
@@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?
do you used js?
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.
@@DarthRazu It doesnt work. The icons are inside the main group blur and so you will end up having a blurred icon inside the ellipse.
That's How to confuse your subscribers.
I love the voice over 😆
Sangat menarik penyampaiannya
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
Ty 🙏
How will I code this ?
Nice now do a tutorial for how a developer will build this.
Already did
fucking lazy devs everywhere nowadays
Is there a way to transfer this animation to framer?
and how can turn all of this into one component and use it in other projects ?
It's awesome❤
I love it, but how to make this responsive ?
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
where did u got this icons)?
Wow🎉 this is cool
Ctrl G is Group in Windows
how to attach icons ? to have the same effect
yes but it selects all icons and even the rectangles which he added@dianadumitriuceramics1551
What is the point of creating animations in a design tool? Can you export it to mobile/web?
Can't it be made in another color?
Credits:- memorisly
how can you use this with different background
Please how do I add my plugins?
Figma Balls
Now i know the reason why the heart attack rate of developers are increasing... 🤕🤣
then how you turn that into code?
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.
And our developers didn't even bother to replicate the animation I did back then 🤦🏻♂️
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 😅
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*
Ok now show me the code please
You don’t have to code… it’s figma
I watch this every now and then only to hear your accent
😮😮😮❤
Those of you crying about this being a nightmare for developers, whatsapp currently uses this effect on the add text status button.
without the liquid tho
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
RETURN THE FAVOUR 😂
the whole animation looks blurry help please?
Did he say ligma??!
wow…
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
It’s not working 😢
As a developer, i'm not working for this.
no one understand with ur explaination
agree
Yesss😢
it wasn't just me then
I remember you
too fastt... i mean speed of video
Headache for front end mates
Just kidding
Front end developers:😭😭
SMASH R AGAIN
Suppafast
How do you translate this into code?
yes
Just make it a lottie.
With tears ?
@@yen-8680LOL
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
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"
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
command G layer blur? how to layer blur
@@v__myk thank you so much
Sunai de Raha hai behra nhi huuu
😂😂
Return the favour 😂
holy shit this is hardly a tutorial
what did you just say
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.
Worse way to explain, not understand 😕
Fudge you as a developer
Cringe