Animating Heart effect in Figma
#ui
Today we’re going to show you how to make a heart animation in Figma with variants, interactive components and custom spring animation. The final product will be an interactive heart icon, and users will be able to reuse the variant across their designs.
First, we’ll create 4 heart components with different states.
1st state: Regular size, black stroke, no fill
2nd state : Larger size, no stroke, red fill
3rd state: Regular size, no stroke, red fill
4th state: Smaller size, black stroke, no fill
Select them all and combine them as variants.
Next, go to prototype mode to add interactive components to these variants:
1. Connect 1st state to the 2nd state, set the interaction to “on click” and transition type to “smart animate”. Change the easing setting to “custom spring”, and adjust the graph to achieve an overshoot animation and set the animation duration to “25ms”.
2. Connect the 2nd state to the 3rd state, set the interaction to “After delay” and set the delay time to "1ms". Set transition type to “smart animate”. Adjust the graph editor to achieve a bouncing effect and set the animation duration to “500ms”.
3. Connect the 3rd state to the 4th state, set the interaction to “on click” and transition type to “smart animate”. Adjust the graph editor to achieve an overshoot animation and set the animation duration to “25ms”.
4. Connect the 4th state back to the 1st state. Set the interaction to “on click” and set the delay time to "1ms". Set transition type to “smart animate”. Adjust the graph editor to achieve a bouncing effect and set the animation duration to “500ms”.
Place the variants in your designs and hit “present” to try it out!