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

• Select your vector asset, then go to: Sketch > Plugins > AEUX >Selection to AE
• 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

‍

• After Effects > Window > Extensions > AEUX
• 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

‍

‍

• Left: Bodymovin Plugin Window | Right: Enable in Preferences
• 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:

Credits: [Airbnb](https://airbnb.design/the-future-of-lottie/)

• 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.

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! 🙏