Create an Animated Like (Heart) Button in Figma

Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Download FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
Get the SOURCE FILES for this project ($1.99): payhip.com/b/DA24d
This Figma interactive prototyping tutorial will be focused on creating an animated like button represented by a simple heart icon. We will be using smart animate within a Figma component to achieve this result. We'll also create a prototype to test the final outcome.
Topics: figma, inteactive prototypes, interactive components, button, figma ux ui design
---------
© 2022 Mavi Design

[@sandraperadilla]

Thank you! I was wondering how to do it, and I made it because of the video. :)

[@apexa_sharma545]

thankyou so much. it was so easy. you made it such

[@Sweetyhigh123]

Thank you so much Mavi,
well appreciate your time☺️

[@marie91999]

Exactly what I was looking for. Thank you so much!

[@Olliewiener]

bro thank u so much for walking everyone through each step! I am new to figma, and it's nice to have someone to help me!

[@rubypaterson4569]

Thank you so much, Mavi! Find your video always has great useful content!! ❤

[@mavidesign]

Thanks Ruby! It’s great to have you here. Much appreciated 😊

[@tushar_parab]

Beautiful ❤

[@KGangasai]

awesome dude. thanks a lot 😍😍😘😘❤❤

[@rawan9018]

Done thanks a lot !

[@haswasnthere]

this animated like has a chance, sometimes it does work the hovering to the middle and sometimes goes to right corner and i dont know how tf to fix it

[@nitin2701]

#figma #animations #cool #effects #letsgo #👀 #🔥 #♥️

Jumping!
I need to jump more, fair point
In general everything you don’t use, you will loose. Simple, brain, muscle, flexibility , mobility …

[@fabiancr7306]

Do you know why my interaccion comes from left corner and not from the middle? When the element changes his size it has the anchor point left and up, and not from the center.

[@mavidesign]

Try playing around with "Constrains" and setting them to "Center" and "Center"

[@ecoa]

@@mavidesign I have the same issue but that still didn't change.

[@haswasnthere]

@@mavidesign I do have same issues, and the constrains didnt fix them

[@natacho_1]

I have the same issue. I've tried a couple different tutorials and changing the constraints didn't do anything for me... Anyone have an answer?

[@dennistundrea1234]

Place the icon in a frame, and set that frame to auto-layout>centered. That frame would be a component, so you would add variants from it.

[@MrTORISSIMO]

You lost me at the component properties part, way to fast and missing steps there IMO, was a good start though

[@dimitristerzz]

he indeed didnt not explain it well we need to be able to know what keys hes pressing

[@TheBalkanSpy]

Tbh hover state is pointless if you’re doing this for a mobile app that will almost never be used with a mouse…

[@mavidesign]

Ofc, liking isn’t exclusive to mobile though

[@aldoeljardinero]

worst tutorial ever

[@mavidesign]

Why?

[@nitin2701]

Why would you even question this lol.... You did a great job! Thank you for your help!​@@mavidesign

[@disoin.studio]

very simple? hahahaa OMG, is magic!