Animating liquid fab buttons in figma

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: [e-mail]

[@scopeyin3629]

How to make ur developers hate u super fast😂

[@AironGC]

Reall

[@covalentbond7933]

You don't know what you're talking about lol

[@covalentbond7933]

Each SVG button has its own ID so I don't see how any developer would have issues with this

[@adamsyarifhidayatullah5826]

​@@covalentbond7933he not said about issues, he said about hated and complexity One more thing. You dont get it dont you (jokes)

[@communityyoumustseekyoungp5630]

@@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

[@loomonda18]

STOP YELLING AT ME

[@INKI_teh_Rogue]

R E T U R N T H E F A V O U R !

[@redwanouthouna7075]

developers are crying in the corner.

[@-Cocell]

I am a dev. And I like it. Cuz I am a graphic designer as well. :)

[@jkoblivion4175]

We are, it's true. Designers with lack of knowledge regarding development code it's a cringe reality.

[@feelcollins4358]

@@jkoblivion4175 Just get good, simple

[@Frosty_Jockey]

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-

[@parthrathod2607]

I will try this with CSS and HTML using multiple filter layers

[@parthrathod2607]

@@azazella8399 no I failed!

[@azazella8399]

@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?

[@einstenoarquitetoelementar2233]

do you used js?

[@Vikumandyal]

That's How to confuse your subscribers.

[@nurulfarhanamohamadjaafar2334]

I love the voice over 😆

[@Yauboyy]

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.

[@nitzshou5835]

a fun UI designer is a devs worst nightmare 😅

[@uimass]

@@nitzshou5835 but eventually you are going to figure it out, right? why don't you learn it beforehand then?

[@blueboy4625]

​@@uimassthere is no such thing as learning before hand in programming, just copying someone else's code

[@gawwad4073]

@@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

[@pmg045]

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?

[@DarthRazu]

put the invididual smaller circles in they;re own group.add the icon in each corresponding group.

[@marcoprivitera5201]

@@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.

[@АндрійХалявка]

It's awesome❤

[@muhammadyusufsuryakusuma8270]

Sangat menarik penyampaiannya

[@Linda-mj2cz]

Ty 🙏

[@eliochaghoury2797]

and how can turn all of this into one component and use it in other projects ?

[@EmmanuelOni-n6c]

Wow🎉 this is cool

[@irkfaisal]

How will I code this ?

[@tinslyco]

Is there a way to transfer this animation to framer?

[@bhavyaranjan641]

What if I want a different color other than black? With lighter colours, it becomes invisible and with like, dark brown it becomes yellow

[@bhavyaranjan641]

Matlab?@@sabkamalikek8022

[@SullioPeisao]

same problem, if you have another color the result is bad. also with a gradient

[@Scott_C]

Nice now do a tutorial for how a developer will build this.

[@creativewebelements]

Already did

[@brunoIsmyname]

fucking lazy devs everywhere nowadays

[@ronitgurjar5747]

Credits:- memorisly

[@DobberG]

I love it, but how to make this responsive ?

[@josephjohnms6960]

Ctrl G is Group in Windows

[@vanessaalvarado554]

Can't it be made in another color?

[@matvi_x22]

where did u got this icons)?

[@insinyur621]

how can you use this with different background

[@gawwad4073]

What is the point of creating animations in a design tool? Can you export it to mobile/web?

[@emmanuel_andrew]

Please how do I add my plugins?

[@kanomee]

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 😅

[@vincemess]

And our developers didn't even bother to replicate the animation I did back then 🤦🏻‍♂️

[@sofianealloui]

😮😮😮❤

Figma Balls

[@3_degree_s]

how to attach icons ? to have the same effect

[@dianadumitriuceramics1551]

click on the icon and circle while pressing ctrl+G. this is how you attach one to another

[@3_degree_s]

yes but it selects all icons and even the rectangles which he added@@dianadumitriuceramics1551

[@juanpablobartolome7264]

the whole animation looks blurry help please?

[@rigidhammer7376]

then how you turn that into code?

[@prafulsutar.uxd.]

I watch this every now and then only to hear your accent

[@QutubSyed]

Bro how’d you duplicate the small circle when it’s already grouped? Idk how to iso 😭

[@SouravPrajapati-pl3ee]

Select it from the layers panel first and then you are good to go.

[@alimimikael376]

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

[@bouloualouproduction241]

Group them first

[@andrecoetzer7032]

Ok now show me the code please

[@Mautifko]

You don’t have to code… it’s figma

[@mohammedsulaimanbah433]

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

[@aaronokafor1354]

Try selecting it from the side bar and then you can drag as you wish

[@linhkhanh4256]

maybe you should block the two rectangle first

[@afzalux174]

@@linhkhanh4256 Lock*

[@trvexepression2605]

wow…

[@MvPTrinity]

Those of you crying about this being a nightmare for developers, whatsapp currently uses this effect on the add text status button.

[@feelcollins4358]

without the liquid tho

[@Abdullah-Keser]

As a developer, i'm not working for this.

[@MohanaKumar-xy5xm]

Now i know the reason why the heart attack rate of developers are increasing... 🤕🤣

[@designorbit5508]

Bro I am doing but it's not done as perfect as your can you please help me out to get this

[@poissonyt9006]

Increase layer blur to 80 something

[@geraldinec1124]

RETURN THE FAVOUR 😂

[@matveipetrov6654]

Did he say ligma??!

[@adamsshola7070]

It’s not working 😢

[@congkhaidoan8528]

too fastt... i mean speed of video

[@mangkenny4437]

no one understand with ur explaination

[@UnleashYourWonder]

agree

[@ShubaneshAK]

Yesss😢

[@gliorganici9506]

it wasn't just me then

[@ThatOneOddGuy]

I remember you

[@akirahojo2]

How do you translate this into code?

[@jsm2687]

yes

[@entertheabzu]

Just make it a lottie.

[@yen-8680]

With tears ?

[@alankarmisra]

@@yen-8680LOL

[@Bin-Abdullah-24]

SMASH R AGAIN

[@Adiyat_Coto]

Headache for front end mates Just kidding

[@visiontv112]

Front end developers:😭😭

[@bobbybritishcat4477]

command G layer blur? how to layer blur

[@Namasteman]

@@vmyk3 thank you so much

[@SUB-yi2fr]

Suppafast

[@CREATORUNOFFICIAL]

Bro can you do it in Windows system

[@badnbauji1207]

The commands in Figma are the same for Windows and Mac

[@ramirolferreyra47]

Replace the "Command" key with "Ctrl"

[@EnnterrPeace]

Sunai de Raha hai behra nhi huuu

[@creativewebelements]

😂😂

[@ryndaman2855]

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

[@DarthRazu]

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

[@mdshafqatullah4996]

Worse way to explain, not understand 😕

[@adeelrehman29]

Return the favour 😂

[@EthanMiles-hb6tu]

Fudge you as a developer

[@3dlise]

holy shit this is hardly a tutorial what did you just say

[@mannygalactic4887]

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.

[@nested9301]

Cringe