Create an Animated Like (Heart) Button in Figma

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

[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!

[marie]

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

[sandraperadilla]

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

[maryshadbolt]

How did you get the parts rotated at exactly the right angle so that they fit perfectly together? Thanks!

[apexa_sharma]

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

[Sweetyhigh]

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

[rubypaterson]

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

[maryshadbolt]

How did you get it to go from a diamond to a rectangular component? Thanks!

[hashirahmedkhan]

what did you do before making the component, cuz the name didn't change from union to heart for me????

[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

[MrTORISSIMO]

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

[nitin]

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

[fabiancr]

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.

[daiji]

why mine didn't show up on Asset??:(
Anyone pleaseee helppp

Jumping!
I need to jump more, fair point

In general everything you don’t use, you will loose. Simple, brain, muscle, flexibility, mobility …

[TheBalkanSpy]

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