Blog Post
Bringing Micro-Interactions from Figma to Webflow: Enhance Website Interactivity
#FigmaFriday
by
Benjamin Young
Today's #FigmaFriday tip? Bringing micro-interactions from Figma to Webflow 🪄🧙🏻♂️
It's an essential workflow that allows us to create high-quality Lottie assets for websites by leveraging Figma, After Effects, and a couple of plugins.
Here's the workflow:
- Build vector assets for your animation keyframes in Figma (we typically do first and last frames for micro-interactions) 🔨
- Install the AEUX plugin for After Effects and Figma 🚧
- Use AEUX to convert your Figma assets into layered After Effects compositions 🤖
- Use After Effects to build your micro-interaction animations (being mindful of the features supported by Lottie) 🐎
- Use the LottieFiles or Bodymovin plugin to export your animation (JSON or dotLottie format) and embed them into your Webflow site 🖥️
That's it! Micro-interactions take effort, but they are details worth their weight in gold for imparting quality and personality. What Figma workflows keep you keen? 🥷 #FigmaFriday
See more insights 👀
Get in Touch
Have a project or problem to solve? Let’s get started.
Use our form to reach out or send us a note directly at hello@itsgigantic.com.
Working with Gigantic was inspiring and impactful. Given the nature and timeline of this project, our company needed a collaborative and nimble partner—not just one who lists those qualities as bullet points in a capabilities presentation, but a partner who actually exhibits them day in and day out. Gigantic worked with our team to create and implement design decisions in real-time and, like any true partner, asked great questions and challenged us which has only benefited our company as a whole.
Thanks for reaching out! 🚀
We've received your submission and will get back to you ASAP.
Oops! Something went wrong while submitting the form.
Working with Gigantic was inspiring and impactful. Given the nature and timeline of this project, our company needed a collaborative and nimble partner—not just one who lists those qualities as bullet points in a capabilities presentation, but a partner who actually exhibits them day in and day out. Gigantic worked with our team to create and implement design decisions in real-time and, like any true partner, asked great questions and challenged us which has only benefited our company as a whole.