How Airbnb’s Lottie is easing friction between design and development

November 21, 2017

Designers get the frontend creative freedom they want, while developers get the backend time they need.

The following is a collaboration between Mark Prescott, Designer, and Geoff Pado, Principal Engineer.

Lottie love 

In digital product design, a functional relationship between designer and developer is crucial. Both teams need to work in the most streamlined and efficient state possible, and finding that sweet spot requires constant collaboration. The designer needs to find a comfortable balance of function and flair; they must create something that works and is well-designed for its intended purpose, but they also need to give that product enough love so that it appears elegant and memorable. Meanwhile, developers keep designers in check. One can argue that a developer’s job is to create a product that functions without bugs, and does not appear visually broken. A developer may not have the time, patience, or skill to execute the “next-level $#!t” that a designer hands off to them.

Most of the time, this relationship works. Ideally, a designer works closely with a developer, and in doing so learns her skill level and how much of that designer’s special sauce she can adequately replicate in code. But this relationship also limits us, as you can imagine, as our glorious, ground-breaking designs are often diluted to accommodate what development can accomplish within their timeframe and budget. You wouldn’t believe the number of times that we’ve designed something that we’re proud of only to see it get cut by the need to prioritize less labor-intensive features.

But what if there were a way to work around these limitations? What if there were a way for the designer’s work to make it directly into the product? There has to be a better way!

Well, there is now. We were tickled when Lottie was released earlier this year by Airbnb (yes, that Airbnb). Lottie is a software library that works with iOS, Android, and React Native to render After Effects animations. It pairs with another plugin called Bodymovin, which runs inside After Effects to export an animation as a JSON file. Lottie takes files produced by Bodymovin and renders them using the native animation libraries of each platform. Developers are able to place an area in which to play animations just like any other UI element (such as a button or text area). Once that area is in place, playing an animation is just telling it which file to play. Tweaks to that animation are easy to implement: just point to a different file instead of spending hours changing small values in code.

This means that complex animations can be used just as easily as any other image asset—just drop it in where you want it, and let it play. Designers can push what they create to their heart’s content without worrying about what will happen once they hand it off to development.

In the past, complex animations like these were often turned into a sequence of PNG images (one for each frame of the animation and one set for each screen size or scale factor) which would quickly become heavy. Alternatively, a developer would write thousands of lines of code in the app’s native language for the animation, either by hand or with tools like PaintCode. You can imagine the relief everyone now feels knowing that the nice little package a designer created can be tucked right into the app without any re-creation needed.

My team and I used Lottie heavily in a recent iOS app that required a ton of animated elements. It paired with a physical product that the user (a child aged 8–12) would first assemble, and would then use to conduct various experiments or play mini-games. Because the app was intended for a young audience, it relied on illustrated elements that were bright, engaging, and done at a very high fidelity.

As a designer, my process for this app was the same as it would be if I were creating for any other outlet. I initially made most of the elements in Illustrator, then pulled them into After Effects for animation. I wanted all the elements in the animation to be vector shapes, in order for it to export as one JSON file (if there were any static images, those would be exported as images linked to the animation, which could add to complexity and file size). This would also allow it to scale gracefully to any device. Lottie supports basic features right now: shapes, fills, strokes, gradients, masks, live text, and all your transitions such as rotate, move position, scale, and opacity. These features gave me plenty of runway to be creative and make something great.

Once the client and I were satisfied with the design, all I had to do was export the animation via the Bodymovin plugin. This created a JSON file and an HTML file that I could test in a web browser. Most of the app’s pages had already been created before animations were finalized, with placeholders where each animation would be dropped in. Because of Lottie, bringing in forty or so extremely complicated animations took a junior developer less than a day of work. It was truly a “set it and forget it” situation; we didn’t need to spend time going back and forth between design and development with tweaks to match the initial concept.

One of our animations. You can view its corresponding HTML file here to see how much it can scale without losing fidelity.

Most of the animation JSON files were around only 100 KB each. What’s more, a single file could be scaled to any scale factor (four differently-sized iPhones and three iPads) and still look perfect. This alone eliminated the hours of time and effort it would have taken to export something at each size and for a developer to ingest each into the right place. Because of this, we were able to allocate more time to the less-expensive design budget compared to using dev hours to integrate our animations in code.

As great as this all is, we’ve only begun to dig into what Lottie can do. There are more and more great examples of its capabilities in action—properties of the animation can be manipulated on the fly, such as changing the color of an element from some other stimuli, changing the speed or direction of an animation, or displaying different text strings in different situations.

Products like Lottie are making huge steps toward giving designers more control of these frontend elements in the final product, while freeing up developers’ time to solve the more complex problems in the backend. This is where the evident tender loving care that goes into your product can really shine: As apps become more and more mature in features and price, the next beach-head is competing on experience, and this tool is vital to that. Taking the extra step to go beyond static elements can greatly improve usability and delight users. It shows that the product designers and developers have thought deeply about the product experience—and that they’ve put the extra attention and care into it—all for the sake of creating a product that users will want to come back to again and again.

Design and Engineering

Mark Prescott is a Designer. Geoff Pado is a Principal Engineer. Both Mark and Geoff are colleagues at L4 Digital who bring years of rich experience to their work.

Opportunity and L4
Tech’s Best and Worst in 2017
Droidcon 2017: A History of Android, and a Look Ahead
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • Contact L4