Animation, micro-interaction, and interactive design has become almost expected for intuitive web and native apps. They are a vital part of the user experience. They communicate status, outcomes, and end results. Good interactive design gives the final product a layer of polish that’s hard to gain any other way, and when done well, fit seamlessly into an experience.
At Intersect, we want all of our work to feel polished and give the user the best experience possible. Because of this, we want to ensure that all finishing touches we dream about when designing can be included easily into our projects. So, one day I set out to find a way to incorporate these things without putting extra work on our engineering teams.
What I came up with may just change the way we approach interaction design forever. Hopefully, you will get some value out of this process as well.
Why it came about
Interaction design during compressed timelines is always an early candidate to be descoped. Building large complex products means functionality gets prioritized first over micro-interactions. As a designer, I didn’t want to see that happen.
So, I went on a hunt. A hunt to find a solution that would allow designers to take the development effort back from engineers and, at the same time, empower us to create more beautiful and usable experiences. The solution also had to be lightweight and able to be integrated with the production codebase across multiple platforms. Many design tools such as Principle or Flinto exist, but none of the animations or custom interactions can be used by engineers, especially across both native and web apps. Enter Lottie.
Lottie has been around for a little while but has not really been widely adopted yet. Hopefully, this can aid in gaining Lottie the attention it truly deserves!
Lottie is a mobile library for Android, iOS, and React Native created by the talented people over at Airbnb Design. Originally created to solve the same problem I was facing – how do designers create animations that fulfil their creative vision, without passing on the burden to engineers to painstakingly recreate the animations, and doubling the effort.
How does it work, and what’s my workflow?
Illustrations created in Sketch are handed off to After Effects through a plugin called AEUX. The plugin takes the shapes and layers and redraws them using its own shape tools, masks, and fills.
Animations are then created in After Effects and exported with a free, open-source extension called Bodymovin. Bodymovin takes all the animated shape and transformation data and spits out one very small .json file.
This is where Lottie comes in, Lottie takes that .json and allows these animations to be rendered in real-time natively on the device or browser pretty much as easily as it would have if we used a static image.
Why is Lottie a BIG DEAL!?
- It lets designers be designers and engineers to keep focused on features and functionality. No development time will be spent drawing and tweaking shape animations to the “0.00038347928734” decimal points.
- Smaller file sizes! Unlike MP4 video or GIFs, most Lottie files can be kept in the Kilobyte range.
- Because the files are so small and natively rendered, Lottie animation will run very smoothly on older or underpowered devices.
- The hardest part of micro-interactions is creating the animations themselves, not the workflow. The workflow is super fast and seamless if done correctly – exports from After Effects take seconds.
- Even after an export, YOU CAN STILL CHANGE PROPERTIES! Let’s say you’ve exported and implemented a Lottie animation into a page on a website and suddenly you need to change a colour… Well, just go-ahead. It’s a JSON file. Just change the HEX value.