When we talk about exporting motion, we usually think about video files. However, if you look around the web or open an app, it won’t be long before you see animated content that isn’t a video: Perhaps a loading indicator, a welcoming character, or a product visualization. The web is moving more and more… And we absolutely love this. Products should inspire, delight, and engage, and motion is the perfect medium to build connections with the audience on the other side of the screen.

Product motion is still in its infancy because it isn’t the easiest thing to create, resulting in it usually being pushed down the roadmap as a “nice to have”. After all, building animation with code takes time, and fostering this collaboration between designers and engineers can be challenging.

Enter Lottie, a file format that enables designers to export animations, ready to embed into live products, drop into Webflow, and even make interactive.

There’s just one problem… creating the animations. So, staying true to our mission to empower creators and bring down the barrier to motion design, we thought it was about time to make this a little easier…

Export a Lottie file without After Effects

The Fable team has been working diligently to support the Lottie format, and today we’re thrilled to release the feature from beta and turn it on for all users!

To export a Lottie file from Fable, simply click the Export button from the project toolbar. Then, select Lottie from the format dropdown, hit export, and you’ll get a JSON file that’s ready to go. It’s that easy – No plugins required. The file can then be shared with engineering or dropped right into a Webflow project.

We think this is going to open up a new world for designers for whom the format has previously been out of reach. With Lottie now one click away, designers can create, review, and release–all under one roof without ever having to leave the browser.

A note on compatibility

We think Lottie is great, but the format does have its creative limitations and works best with SVG-based projects, so a good rule of thumb is to avoid using effects or other raster-based components.

Fable supports most of the Lottie spec out of the box, and you can check out our docs for granular details on where minor changes might arise.

Last thing – In the Fable export window, we also show you a live preview of your project before you trigger the export. This preview area is a real-world Lottie player, meaning whatever you see here will be reflected in the final JSON file so you can check everything looks good to go.

That’s it! We can’t wait to see what the Fable community creates with Lottie animations. Tag us or share a link in our community channel when your work goes live, and roll on a more delightful, animated internet 😀