Figma shorts: Heart animation in Figma

Figma is free to use. Sign up here: 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 2n