Figma Tutorial - Liquid Metal Button

Through fascinating experiments, we achieved unexpected results by blending various overlay modes and animating them with nested gradient changes in Figma, resulting in a liquid metal effect. Follow this step-by-step tutorial to create it yourself!
Tutorial assets: pixelpoint.io/...
For more design inspiration and exclusive content, follow me on my social media channels:
Twitter: / alex_barashkov
Linkedin: / barashkov-alex
Instagram: / pixelpoint.io
Threads: www.threads.ne...

[@Mathan.design]

this is really amazing, if you added the Figma file in community, it will be more helpful for us. but your work is really amazing. we are waiting for more amazing ideas and techniques from you. Thank you so much :)

[@pixelpoint-io]

@@Mathan.design Thank you! I’m planning to launch a dedicated portal for all those videos/concept to store an additional assets there.

[@Mathan.design]

@@pixelpoint-io its really cool idea. i really appreciate it. :) we are learning lot of amazing techniques from you. thank you so much for your guidance. :)

[@JesseMoffett]

🤓 SO GOOD! Love your tutorials! Thank you!

[@pixelpoint-io]

Thank you for the support!

[@sojanprajapati5217]

This is amazing. But I would love to see the development side of it as well! 😅

[@pixelpoint-io]

@@sojanprajapati5217 You can check it here y7pxzc.csb.app/

[@smiloxham3652]

How do you go aboout converting stuff like this to code :o ?

[@pixelpoint-io]

@@smiloxham3652 Most of the stuff and effects we do in Figma also are available in CSS/JS, here is how did we develop this concept y7pxzc.csb.app/

[@zinebboutaa8934]

Thank you for such a tutorial, i am wondering if it's possible to build something like this in Framer (no code solution)

[@pixelpoint-io]

Yes, it’s possible. It will be similar approach to how it was done in Figma.

[@kin9julian]

Looks fantastic but my coder will choke me if I try something funny like that 😂😂😂

[@traderfox5543]

its insane wow. I cant imagine the struggle of the dev ahah

[@pixelpoint-io]

@@traderfox5543 It took some time, but nothing extraordinary y7pxzc.csb.app/

[@0ni_x4]

@@pixelpoint-io Thank God i didn't check the comments earlier lol, i coded this in react typescript & tailwind css. about 1 hour and 30 minutes (257 lines of code)

[@Habibullah-gh4lt]

Can you tell me please how to convert this code

[@pixelpoint-io]

@@Habibullah-gh4lt Here is a codepen version we did y7pxzc.csb.app/