I used to think that it takes days to animate icons and illustrations that works with native apps. I was wrong. You can now import Sketch layers into After Effects without redrawing everything in Adobe Illustrator, with the help of Lottie by Airbnb. How awesome is that?!
Here, I will try my best to explain in the simplest way possible to get things done. I'm fairly new to this but I thought I'd share some tips that might help others. 🙌
For this tutorial, I assume you already have Sketch & After Effects running in your computer, and you have basic knowledge of Sketch and After Effects. :)
Before we start diving into the tutorial, I'd like to share the benefits of using Lottie animations. Lottie, built by Airbnb, gives good UX because they are:
Let's get to work!
Your JSON file can be used directly in your favourite IDE (Integrated Development Environment)
This is the stage where developers grab the JSON file, import to Xcode or Android Studio, loop the animation using code, then test it on a phone emulator.
🖊 If you're curious, you can find Lottie's Github repo here.
Voilà! I hope this helps you. Thank you for taking the time to read this! 🙏