LottieFiles

That is a wrap on our LottieFiles workshop! Thanks to everyone who joined us to explore the world of motion design and bring ideas to life through animation. Here is a glimpse of the fun had by our kawan-kawan that filled the room. We would also like to extend our appreciation to LottieFiles (Yaamin M, Celcea Tifani) for hosting the workshop session, our sponsor, Airfoil, and our partners, Amazon Web Services (AWS) and Females in Tech, for making this event a success!

For my first-ever Figma and Framer project, I created a Fintech website featuring interactive animations I made with LottieFiles State Machines. ✨ Meet Finiro — short for Financial Hero. The concept app that can host multiple bank accounts, send money internationally, manage multiple cards from different processors, and track income and expenses — all in one place. I wanted to understand what makes interactive animations truly work on platforms like Framer, so I built Finiro as a full pipeline test: Design: Built the website UI and app homepage in Figma Animation: Created interactive, state-based animations with LottieFiles State Machines Development: Integrated everything seamlessly in Framer The animations include: 🔒 Floating cards that morph into a padlock to show security 🌍 A pulsing world map that sends currency lines to different countries 💳 A digital wallet that shows real-time card balances 💸 A looping transaction alert 📈 Interactive graphs that reveal spending and income trends The animations have different types of interactivity that depend on which device you're viewing them on. This project wasn’t perfect. I made mistakes — like sizing animations incorrectly for frames and stacks. However, every challenge helped me learn how to create animations that are smoother, scalable, and platform-ready. Through Finiro, I learned first-hand how to: ✅ Design and prepare interactive animations for Framer ✅ Optimize them for touch and hover ✅ Create meaningful motion that improves UX I’m grateful for what this project taught me about combining motion, design, and interactivity. I’m open to LottieFiles animation projects for websites and mobile apps. Send a dm if you have one you'd like us to discuss. You can explore the live website here: finiro.framer.website I'll be posting the full case study soon, so follow me if that interests you. #Figma #Framer #LottieFiles #Animation #Fintech #WebDesign #InteractiveDesign #UXMotion #Lottie #LottieAnimation #MotionDesign #StateMachine

Been a minute. Finally tried the new LottieFiles for Figma plugin with the Vectorizer feature. Back in my early graphic design days 👴🏼, when someone said “can you send the vector?”, we’d often get an EPS file with a JPEG buried inside. From the client’s side, that was totally fine “just hit generate and it’ll turn into a vector!” We laughed because that mythical “generate” button didn’t exist. But now it does. The joke became real. Lottie made it happen ✨. Design’s come a long way. Generate, yalla. #LottieFiles #Figma #Vectorizer #designtools

🎃 Happy Halloween! 👻 Week 4 — been experimenting with LottieFiles State Machines to see what else is possible with the current updates, and thought why not make something spooky? 🧙♀️ So here’s a little Halloween Tarot Card Game I built using Lottie Creator! I baked in a small randomiser inside the state machine so the safe card changes every time you perform an action or even wait. You never know what you’ll get 😈 Big shoutout to Abdelrahman Ashraf for adding some mean sounds to complete this weekly experiment! 🎧 (Checkout the codepen link in the chat) Just a small experiment to see how far we can push State Machines and this one turned out to be a real treat (with a few tricks). 🕸️ Links in the comments! #HappyHalloween #LottieFiles #StateMachines #InteractiveMotion

Custom loaders from LottieFiles are a joy to watch every single time!