Exploring Animation in Figma
Plugins, Possibilities, and Product Evolution
As someone deeply embedded in the design and product world, I’ve been thinking a lot lately about the evolution of design tools — particularly around animation capabilities in Figma. A recent conversation got me diving into this topic, and I wanted to share some insights about where we are today and where things might be heading.
The Current State of Animation in Figma
Right now, Figma’s native animation capabilities are pretty limited. While the platform has been cranking out new features and products at an incredible pace — especially around their recent Config releases — animation and motion design haven’t been a primary focus. The approach seems to be intentionally bare-bones across new features: ship an MVP, get users engaged, then iterate based on feedback.
But here’s where it gets interesting: the plugin ecosystem is filling this gap in fascinating ways.
The Plugin Ecosystem: A Timeline Revolution
I recently discovered some third-party plugins (like Bannerify) that are bringing timeline-based animation directly into Figma. These tools essentially create a layer-based animation system where you can animate individual elements over time — think After Effects, but integrated into your design workflow.
What struck me about these plugins is how they represent the community-driven nature of Figma’s evolution. The plugin system allows anyone with development knowledge to extend Figma’s capabilities, and with AI tools like Claude or ChatGPT, even non-developers can create functional plugins by generating the necessary code.
The Figma Acquisition Strategy: Speed of Innovation
Speaking of evolution, Figma just announced their acquisition of Payload, a CMS company, to add content management capabilities to Figma Sites. This happened just a month and a half after Sites launched. Think about that timeline — they released a product, identified a key missing feature (CMS functionality), acquired a company to solve it, and announced the integration in under two months.
This aggressive approach to product development gives me confidence that animation features are inevitable. When a community is already building timeline-based animation tools as plugins, and Figma is moving this quickly on other fronts, it’s really just a matter of time before native animation capabilities make it into the core product.
The Developer Integration Evolution
One of the most exciting developments I’ve been experimenting with is the new Figma MCP (Model Context Protocol) integration. This allows you to select a frame in Figma and have AI tools like Cursor automatically generate functional HTML and CSS code that matches your design.
The key to making this work effectively is having proper naming conventions, using auto layout, and ensuring your layers are well-organized. When you think about responsiveness and pixel-perfect translation from design to code, these foundational practices become crucial.
Here’s my workflow:
Enable dev mode MCP server in the specific Figma file
Ensure all layers are properly named and structured
Select the frame you want to convert
Use Cursor to generate the code with a simple prompt
The results aren’t perfect, but they’re remarkably close to the original design — close enough to serve as a solid starting point for development.
The Broader Product Design Context
All of this ties into larger trends I’m seeing in product development. Tools are becoming more integrated, workflows are becoming more fluid, and the line between design and development continues to blur.
In my current work on donation form builders and donor experiences, I’m constantly thinking about how design decisions translate into user experiences and technical implementation. The ability to quickly prototype, animate interactions, and generate functional code from designs isn’t just convenient — it’s becoming essential for modern product development.
Looking Forward
The pace of innovation in design tools feels unprecedented. We’re moving from static mockups to interactive prototypes to functional code generation in increasingly seamless ways. Animation capabilities in Figma feel less like a question of “if” and more like “when.”
For teams working on complex product experiences, this evolution means:
Faster iteration cycles between design and development
More sophisticated prototyping capabilities
Better communication of interaction design intent
Reduced friction in the handoff process
The plugin ecosystem will likely continue pushing boundaries until native features catch up. And given Figma’s current acquisition and integration strategy, that catch-up period might be shorter than we think.
Practical Takeaways
If you’re working in product design today:
Explore the plugin ecosystem — Don’t wait for native features when community solutions exist
Invest in proper file organization — Clean naming conventions and auto layout pay dividends in AI-assisted workflows
Experiment with new integrations — Tools like the Figma MCP are worth testing, even in beta states
Stay close to development workflows — The design-to-code gap is shrinking rapidly
The future of design tooling is collaborative, integrated, and increasingly intelligent. Animation in Figma is just one piece of this larger evolution, but it’s an important one that will unlock new possibilities for communicating and building product experiences.
What animation capabilities would transform your design workflow? The community is building them faster than ever — it might be worth checking what’s already possible.