Create an interactive hover animation with Figma State Machines
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
Follow #LottieFiles on social media:
YouTube: https://lottie.link/YoutubeSubscribe
Instagram: https://www.instagram.com/lottie.files/
X: https://x.com/lottiefiles
Facebook: https://www.facebook.com/LottieFiles/
LinkedIn: https://www.linkedin.com/company/lottiefiles
#LottieFiles #Lottie #MotionDesign #Animation #Motion #LottieAnimation #LottieCreator