It’s a big deal to have this power, and droves of designers are scheduling time out of their weekends to learn the new toolchain. But it’s surprisingly complex.

Lottie’s reliance on After Effects

Lottie relies on Adobe After Effects (AE) as its animation creation tool. AE’s brilliance is undeniable — it’s the industry standard for animating cinematic movie titles, intros, and transitions. But with the power comes a labyrinth of complexity (many features being unsupported by Lottie and UI animation in general). AE’s capabilities make it nontrivial to learn, and sadly the steep curve puts using Lottie out of reach for many designers.



As we imagine the ideal set of tools for UI motion design, we can’t help but wonder if AE is really the right companion for Lottie. After all, AE being used for UI motion design is beyond its original scope. The situation feels analogous to 2005, when designers were relying heavily on Photoshop as a UI design tool — not because it was made for the type of work, but because there was nothing better suited on the market. Then along came Sketch, a tool with a pure UI design focus.



What if there were an “After Effects” that was intended for app motion and interaction design?

A new way to Lottie

We designed Haiku from the ground up for animating UI components. Like Sketch, it is a simple tool with a specific purpose, and like AE, it is compatible with Lottie.



Our users are saying that it’s more intuitive to animate, and generally much easier to get up and running than AE. You’re not required to download and install special third-party plug-ins for both Sketch and After Effects, then learn to animate using the subset of features that are supported. You simply create animations in Haiku and publish.



After publishing, you’re able to choose to use Lottie as your player (for native applications), or to use our own player (web only for now) where your animations can respond to user interaction.

On top of that, we have a little something up our sleeve we’re calling Live Design. Imagine making a change in your drawing tool (Sketch) and seeing it instantly update in Haiku, your application’s codebase, and across all of the production platforms you’re targeting. That’d truly be an unprecedented connection for design and development teams — the backbone of a connected design system.



There’s recently been a lot of buzz about design tools implementing “design system managers” when they are in reality merely static pictures of design systems. We think there’s a better way forward — that a design system should be a living set of components. With Haiku it can be just that, and it’s a big difference. We’re going to release Live Design into the app soon. Until then, here’s a quick teaser of just how satisfying this paradigm-shifting workflow feels.