The Hidden Cost of Exported Animations: Bundle Size and Main Thread Blocking
When Figma Motion launched, designers were thrilled to finally have a native timeline. The promise of "Export to React" seemed like the holy grail of handoff. But what happens when you actually drop those exported animations into a production React application?
Usually, performance takes a massive hit.
In this article, we'll look at the technical differences in how Figma Motion and ExodeUI handle performance, bundle size, and rendering.
The Problem with Exported Timeline Code
Exporting a complex timeline animation from Figma typically relies on massive JSON files (like Lottie) or heavy JavaScript libraries that interpret keyframes at runtime.
When you import these into a React application:
- Bundle Size Bloats: You aren't just importing the animation; you're often importing the entire runtime engine required to parse and play it.
- Main Thread Blocking: Parsing heavy JSON or running complex timeline interpolations in JavaScript blocks the main thread, leading to skipped frames and a sluggish UI, especially on low-end mobile devices.
- React State Thrashing: If the animation is tied to React state, every frame might trigger a re-render, destroying application performance.
How ExodeUI Achieves 120 FPS
ExodeUI was built by engineers, for engineers. It completely abandons the "export a timeline" philosophy in favor of native, highly optimized logic structures.
Rust and WebGL Under the Hood
ExodeUI’s engine is built in Rust and compiles to WebAssembly. When you run an ExodeUI component, the heavy lifting of state calculations and physics simulations (like spring interactions or drag events) happens entirely outside of the JavaScript main thread.
Zero-Dependency Exports
When you build an interaction in ExodeUI, the resulting export isn't a heavy JSON blob. It's a clean, compiled component that uses native hooks. There is no massive runtime engine to bundle into your package.json.
Hardware Acceleration
Figma Motion exports often rely on manipulating CSS properties or DOM elements rapidly, causing layout thrashing. ExodeUI leverages WebGL and modern Canvas APIs by default for complex visuals, ensuring that your GPU handles the rendering, leaving your CPU free to run the rest of your React app.
Conclusion
If you are building an internal dashboard where performance doesn't matter, Figma Motion exports might be fine. But if you are building a consumer-facing application where Core Web Vitals, Time to Interactive (TTI), and fluid 120 FPS animations are critical to user retention, ExodeUI is the only architectural choice that makes sense.