# Create an interactive hover animation with Figma State Machines

*By LottieFiles · April 24, 2026*

[Watch the video](https://www.youtube.com/watch?v=pcgmI96vxJE)

---

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](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

Follow #LottieFiles on social media: 
YouTube: [https://lottie.link/YoutubeSubscribe](https://lottie.link/YoutubeSubscribe)
Instagram: [https://www.instagram.com/lottie.files/](https://www.instagram.com/lottie.files/)
X: [https://x.com/lottiefiles](https://x.com/lottiefiles)
Facebook: [https://www.facebook.com/LottieFiles/](https://www.facebook.com/LottieFiles/)
LinkedIn: [https://www.linkedin.com/company/lottiefiles](https://www.linkedin.com/company/lottiefiles)

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