Animating liquid fab buttons in figma

Подписаться 7 тыс.

Просмотров 186 тыс.

50% 1

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

Опубликовано:

3 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 111

@scopeyin3629 Год назад

How to make ur developers hate u super fast😂

@AironGC 6 месяцев назад

Reall

@covalentbond7933 6 месяцев назад

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

@covalentbond7933 6 месяцев назад

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

@adamsyarifhidayatullah5826 5 месяцев назад

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

@communityyoumustseekyoungp5630 4 месяца назад

@@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 11 месяцев назад

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

@Frosty_Jockey 7 месяцев назад

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-

@redwanouthouna7075 Год назад

developers are crying in the corner.

@-Cocell 4 месяца назад

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

@jkoblivion4175 2 месяца назад

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

@feelcollins4358 Месяц назад

@@jkoblivion4175 Just get good, simple

@parthrathod2607 8 месяцев назад

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

@parthrathod2607 2 месяца назад

@@azazella8399 no I failed!

@azazella8399 2 месяца назад

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

@nurulfarhanamohamadjaafar2334 3 месяца назад

I love the voice over 😆

@Vikumandyal Год назад

That's How to confuse your subscribers.

@muhammadyusufsuryakusuma8270 7 месяцев назад

Sangat menarik penyampaiannya

@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 10 месяцев назад

a fun UI designer is a devs worst nightmare 😅

@uimass 4 месяца назад

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

@blueboy4625 4 месяца назад

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

@gawwad4073 3 месяца назад

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

@АндрійХалявка 2 месяца назад

It's awesome❤

@EmmanuelOni-n6c 2 месяца назад

Wow🎉 this is cool

@Linda-mj2cz Месяц назад

Ty 🙏

@eliochaghoury2797 10 часов назад

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

@pmg045 7 месяцев назад

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 6 месяцев назад

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.

@irkfaisal 10 месяцев назад

How will I code this ?

@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

@DobberG 4 месяца назад

I love it, but how to make this responsive ?

@tinslyco 8 месяцев назад

Is there a way to transfer this animation to framer?

@Scott_C 6 месяцев назад

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

@creativewebelements 6 месяцев назад

Already did

@brunoIsmyname 4 месяца назад

fucking lazy devs everywhere nowadays

@vanessaalvarado554 3 месяца назад

Can't it be made in another color?

@gawwad4073 3 месяца назад

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

@josephjohnms6960 10 месяцев назад

Ctrl G is Group in Windows

@insinyur621 6 месяцев назад

how can you use this with different background

@emmanuel_andrew 5 месяцев назад

Please how do I add my plugins?

@3_degree_s 8 месяцев назад

how to attach icons ? to have the same effect

@dianadumitriuceramics1551 8 месяцев назад

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

@3_degree_s 8 месяцев назад

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

@vincemess 4 месяца назад

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

@matvi_x22 3 месяца назад

where did u got this icons)?

@rigidhammer7376 7 месяцев назад

then how you turn that into code?

@juanpablobartolome7264 Год назад

the whole animation looks blurry help please?

@ronitgurjar5747 11 месяцев назад

Credits:- memorisly

@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

@kanomee 11 месяцев назад

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 😅

@QutubSyed 11 месяцев назад

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

@SouravPrajapati-pl3ee 10 месяцев назад

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

@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 4 месяца назад

@@linhkhanh4256 Lock*

@Abdullah-Keser Год назад

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

@andrecoetzer7032 9 месяцев назад

Ok now show me the code please

@Mautifko Месяц назад

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

7 месяцев назад

Figma Balls

@prafulsutar.uxd. 4 месяца назад

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

@sofianealloui 2 месяца назад

😮😮😮❤

@MvPTrinity 8 месяцев назад

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

@MohanaKumar-xy5xm 8 месяцев назад

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

@adamsshola7070 9 месяцев назад

It’s not working 😢

@akirahojo2 Год назад

How do you translate this into code?

@jsm2687 Год назад

yes

@entertheabzu Год назад

Just make it a lottie.

@yen-8680 9 месяцев назад

With tears ?

@alankarmisra 8 месяцев назад

@@yen-8680LOL

@geraldinec1124 9 месяцев назад

RETURN THE FAVOUR 😂

@trvexepression2605 Год назад

wow…

@congkhaidoan8528 Месяц назад

too fastt... i mean speed of video

@matveipetrov6654 Год назад

Did he say ligma??!

@bobbybritishcat4477 Год назад

command G layer blur? how to layer blur

@Namasteman Год назад

@@vmyk3 thank you so much

@visiontv112 10 месяцев назад

Front end developers:😭😭

@mangkenny4437 11 месяцев назад

no one understand with ur explaination

@UnleashYourWonder 10 месяцев назад

agree

@ShubaneshAK 8 месяцев назад

Yesss😢

@gliorganici9506 8 месяцев назад

it wasn't just me then

@ThatOneOddGuy 7 месяцев назад

I remember you

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

@Adiyat_Coto 9 месяцев назад

Headache for front end mates Just kidding

@Bin-Abdullah-24 Месяц назад

SMASH R AGAIN

@ryndaman2855 6 месяцев назад

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 6 месяцев назад

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 8 месяцев назад

Worse way to explain, not understand 😕

@SUB-yi2fr 7 месяцев назад

Suppafast

@EnnterrPeace 7 месяцев назад

Sunai de Raha hai behra nhi huuu

@creativewebelements 7 месяцев назад

😂😂

@3dlise 7 месяцев назад

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

@adeelrehman29 25 дней назад

Return the favour 😂

@EthanMiles-hb6tu 28 дней назад

Fudge you as a developer

@mannygalactic4887 3 месяца назад

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.