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:
Super lightweight, loads quickly even on slow devices
Universal, can be played on different web/mobile devices
It will generate a private link for you to share with others. You can also toggle the animation speed and background color!
To preview on app, download LottieFiles App and scan the QR code using your phone.
8. This JSON file is ready to be used to build a working prototype.
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! 🙏
Hey, I'm Rachel How 👋
Designer & Solopreneur. I'm passionate about solopreneurship, diversifying our income, UI/UX design and productivity. Currently building my 8th income stream and sharing the lessons learnt along the way.