LottieFiles

Create an interactive hover animation with Figma State Machines

LottieFiles·Apr 24, 2026·4 mins 38 secs

Learn how to build a wallet hover interaction in Figma using State Machines and Smart Animate to create a polished, sequenced interactive animation, then exporting it with the LottieFiles for Figma plugin.

Try Figma State Machines: https://lottie.link/figma-sm

Timestamps:
0:00 Introduction to exporting interactive Figma prototypes as Lottie
00:16 Setting up the base frames & animating the card pull effect
01:08 Creating the shine animation & finishing the visual moments
01:41 Connecting the first interaction
02:32 Automating the shine effect
03:11 Finalizing the loop + opening the LottieFiles plugin
03:40 Previewing and saving
04:14 Handoff information & conclusion

#LottieFiles #Lottie #MotionDesign #Animation #Motion #LottieAnimation #LottieCreator