Fave Product Engineering

101 Followers
·

Create native Lottie animations with Sketch and AE, the simple way.

Image for post
Image for post
:)

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. :)

Image for post
Image for post
credits: Airbnb

Why Lottie?

  • 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: 🛠

2. Install AEUX.zxp & Bodymovin.zxp in After Effects by using ZXP Installer

Image for post
Image for post
Just drag and drop the .zxp files to 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 🔸

  • Double-click to install.

4. Export vector assets from Sketch to After Effects, using AEUX

Image for post
Image for post
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

Image for post
Image for post
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

Image for post
Image for post
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:

Image for post
Image for post
Credits: Airbnb
  • 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.

Image for post
Image for post
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! 🙏

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. ☕️

Written by

I design, code and build stuff. Currently: Product Designer (UI/UX) at Fave 🇲🇾 Sometimes I tell people to visit rachelhow.com 👈

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store