Create native Lottie animations with Sketch and AE, the simple way.
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. :)
Why Lottie?
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:
- Open-source (free!)
- Super lightweight, loads quickly even on slow devices
- Universal, can be played on different web/mobile devices
- Animation is accurate and high-quality
- Flexible and efficient
Let’s get to work!
1. You will need: 🛠
- Sketch
- Adobe After Effects
- AEUX plugin for Sketch (Formerly Sketch2AE)
- Bodymovin plugin for After Effects (download at Adobe or aescripts)
- ZXP Installer to install the plugins in .zxp format
2. Install AEUX.zxp & Bodymovin.zxp in After Effects by using ZXP Installer
- First, download all the above tools.
- Launch ZXP Installer
- Drag ‘aeux.zxp’ to ZXP Installer
- Drag ‘bodymovin.zxp’ to ZXP Installer. (You can find the file at: lottie-web-master > build > extension > bodymovin.zxp)
- You should now have both AEUX and Bodymovin plugin in After Effects.
3. Install AEUX plugin in Sketch 🔸
- You only need 1 Sketch plugin — AEUX.sketchplugin.
- Double-click to install.
4. Export vector assets from Sketch to After Effects, using AEUX
- Launch Sketch.
- Tidy up your vector artwork, rename it (optional) for easy reference later.
- Select entire artboard or select the layers you want to export.
- Then, go to: Sketch > Plugins > AEUX > Selection to AE. The data is transferred in the background to After Effects! 👍 Images (if necessary) will be exported to disk in a location you specify.
- If you’re using Figma instead of Sketch, refer here.
5. Import and Animate them in After Effects
- Launch After Effects.
- Go to: After Effects > Window > Extensions > AEUX
- You should see your imported layer data on the plugin pop up window. The blue number shows the number of layers in your composition.
- Set the composition size (I use 3x). “New Comp” is selected by default.
- Click on ‘Build Comp’. Sit back and watch the magic happen!
- Now, you can animate the layers. Go crazy with it!
6. Render and export your animation using Bodymovin
- Launch Bodymovin. Go to: After Effects > Window > Extensions > Bodymovin
- Then, go to: After Effects > Preferences > General > make sure “Allow scripts to Write Files and Access Network” is enabled.
- Now, you will see the Bodymovin pop up window.
- Select the composition that you wish to render. If you want to render the entire artboard as one, select the first one. Specify the render destination and click ‘Render’.
- The animations are now rendered as JSON files 😋
7. Preview and share your Lottie animation on web or phone:
- Drag & drop the JSON file to LottieFiles.com/preview
- 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.
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! 🙏
If there’s anything you’d like to add/improve on this post, please feel free to comment below! Your help is very much appreciated! 😁
Let’s be friends on Twitter, Behance or buy me a coffee. ☕️
