Contributing expert: Irina Lemeshevskaya
UX Designer at Coherent Solutions Poland

 

As a UX/UI designer, I once faced the exhilarating task of creating interface animations and handing them over to developers seamlessly.

 

However, this process can be quite daunting if you’re not familiar with certain aspects. In this article, I’ll share my experience and offer valuable tips to ensure a smooth animation handoff in four stages:

  • preparing illustrations in Figma;

  • transferring illustrations from Figma to Adobe After Effects;

  • creating animation in Adobe After Effects;

  • transferring animation to developers using Lottie.

I’m going to show the process and results in the illustration below.

 

Quick Tips for Smooth Animation Handoff

  • Name each Figma layer clearly (e.g., “Astronaut”, “Left Planet”, etc.).

  • Avoid Merge Paths to prevent JSON import errors.

  • Use AEUX plugin for seamless Figma-to-After Effects transfer.

  • Check animation frame rate (30 fps recommended).

  • Validate with LottieFiles error checker before export.

 

Preparing Illustrations in Figma

 

Prepare Figma Illustrations for After Effects

 

You can prepare an illustration in Adobe Illustrator, Figma, or draw it directly in Adobe After Effects. For me, it was more convenient to use Figma. Here are some tips for Figma to After Effects animation handoff if you decide to go this way:

  • Some designers like to combine various illustration elements into logical groups. However, After Effects doesn’t support this. All elements should be imported as separate shape layers.

  • For convenient work in After Effects, give clear names to each layer. You can combine semantic elements into a frame and export them to AE. For example: “Astronaut”, “Left planet”, “Right planet”. They will be exported as separate compositions.

 

After Effects vs Figma animation creation

 

  • One of Lottie JSON export best practices is to avoid using boolean operators (Union, Subtract, Intersect, Exclude Selection) or creating complex paths with the Pen tool. When importing such elements into .JSON, you will see an error that the Merge Path isn’t supported (LottieFiles). Sometimes, turning off the Merge Path in the shape settings can resolve the issue, but this method won’t work for all illustrations.

 

example of error in lottie plugin

 

  • Convert all layers to curves.

  • Don’t forget to remove all unnecessary layers, groups, dots, and bitmaps from your frame. Ideally, you should delete these in After Effects. Otherwise, your illustration won’t be imported correctly.

  • Convert the text to curves. If it was imported with Merge Path, turn it off in the shape settings in After Effects. Alternatively, you can type text directly in After Effects.

  • Gradients and opacity may not transfer correctly from Figma to After Effects. In this case, try adjusting the gradient manually in After Effects.

  • Avoid using a background color for an illustration if it matches the background in the app. This will lighten the .JSON and eliminate the need to make changes to the animation if the background color in the application changes. For easier animation work in After Effects, you can create a temporary Solid Layer or adjust the background in Composition Settings.

  • When importing an illustration from Figma, some shapes may shift a few pixels in After Effects. Therefore, I recommend marking the checkbox “Export reference image” to compare the imported image with the original.

 

exporting referrence image from figma

 

Transfer Illustration from Figma to Adobe After Effects

 

Consider using the AEUX plugin workflow to transfer illustrations, which simplifies the process between Figma and After Effects. Then, wrap the illustration in a frame, open After Effects, and import the illustration from Figma to AE: Plugins => Development => AEUX. (All necessary links are provided below for your convenience).

 

Create Animation in Adobe After Effects

 

When starting the animation process, it’s crucial to consider the handover to developers from the outset. Delaying this until the animation is completed can result in unnecessary time consumption.

To create animations for handoff, I recommend using the Lottie and Bodymovin plugins. These tools offer scalable, lightweight animations that can be easily delivered to developers.

Lottie is a library for Android, iOS, Web, and Windows that converts Adobe After Effects animations and exports them in .JSON format.

 

Bodymovin vs LottieFiles comparison

 

Bodymovin is an After Effects extension designed to export animations to HTML. This method results in scalable animations without pixelation, which are lightweight and easily delivered to developers.

While there are alternative methods available, they often come with more disadvantages compared to Lottie or Bodymovin:

  • Creating Animations Manually: very expensive and time-consuming from the developer’s perspective;

  • GIF: GIF files are several times larger than similar .JSON files and cannot scale well for larger screens;

  • PNG Sequences: these files are often 30-50 times larger than .JSON files and cannot be scaled up effectively.


For successful file preparation, follow these tips:

  • Verify the frame rate in Composition => Composition settings at the beginning. I usually use 30 fps. While 60 fps will make the animation smoother, it also increases the file size. I wouldn’t recommend changing the frame rate while working on the animation because keyframes can get between frames, making it challenging to identify the cause of any non-smooth animation.

  • Lottie supports only basic animation tools but doesn’t support effects, expressions, text, or 3D. The full list can be found here. I would recommend checking this list or importing the file into Lottie while creating the animation to identify any errors as early as possible.

  • Don’t create unnecessary keyframes, as they increase the size of the .JSON file.

  • Combine animation into a Pre-compose. In my experience, this is particularly useful when there are multiple iterations of animated elements. In this case, it allows you to easily change their size and coordinates relative to the background illustration.

 

Transferring Animation to Developers Using Lottie



Export Animations via Lottie and Bodymovin

 

You can use the Bodymovin or LottieFiles plugins to export animations. LottieFiles offers a more user-friendly interface, an error checker (which is a very useful thing), and a real-time view of the rendered animation.

Personally, I prefer using LottieFiles for error checking and Bodymovin for the final rendering. I find that Bodymovin provides more flexibility in setting up the file, but both tools work effectively.

 

Optimize JSON for Lightweight Animations

 

  • LottieFiles plugin in Figma

  • Lottie Website: Design => Preview/Test
    or from your Workplace

  • Export to local HTML with Bodymovin

  • Various code sandboxes if you have minimal programming knowledge

  • Lottie App for iOS (which doesn’t work for me)


I’d recommend testing the animation in several ways to make sure the result is the same everywhere.

 

Adjust Color Spaces in After Effects and Figma

 

You may notice differences in colors between the illustration/animation in After Effects and Figma. To minimize these differences, you need to set Figma and After Effects to sRGB. However, in my experience, minor color variations still persisted.

 

Tools You May Need to Work with Lottie and Bodymovin

 

  • Adobe After Effects

  • Adobe Media Encoder for rendering animations and presenting them at meetings

  • AEUX plugin for transferring files from Figma to After Effects. This plugin should be installed in both Figma and After Effects.

  • LottieFiles plugin to preview .JSON in Figma

  • Lottie app to open .JSON on iOS devices.

  • Bodymovin plugin from Adobe Creative Cloud

  • LottieFiles for After Effects

 

Other Useful Links

 

 

By following these tips and using the right tools, you can streamline the process of preparing and transferring animations from designers to developers. Establishing a well-organized workflow and using plugins like AEUX, Lottie, and Bodymovin will not only save time but also ensure that the animations are accurately translated to the final product. Don’t forget to set up autosave to keep your work secure and avoid any unnecessary setbacks during the process. With these practices in place, you can confidently collaborate with developers and deliver captivating animations for outstanding web experiences.

 

FAQs on Figma → After Effects → Lottie Animation Handoff

  • The most reliable method is using the AEUX plugin. It allows you to export Figma (or Sketch) layers directly into After Effects while keeping structure, grouping, and naming intact. This prevents issues like misplaced elements or pixel shifts that often happen with manual exports.
  • Merge Paths are not supported by Lottie, so if they’re used in After Effects, they may cause errors or missing shapes in the exported JSON file. Instead, try flattening shapes or restructuring your artwork to ensure compatibility with Lottie’s rendering engine.

  • To optimize file size:

    • Pre-compose complex layers to simplify structure.
    • Avoid unnecessary effects or 3D layers not supported by Lottie.
    • Reduce frame rate (e.g., 30 fps instead of 60).
    • Test export in LottieFiles Preview and iterate until the JSON is lightweight and smooth.

  • No. While Lottie supports most basic shapes, paths, and transforms, certain features are not supported, including:

    • 3D layers
    • Expressions
    • Gradient fills with multiple stop
    • Some blending modes


    For reliable results, always check your animation with the LottieFiles error checker before handing it off to developers.

  • Once exported as a JSON file, developers can embed animations using the Lottie libraries for web, iOS, Android, or React Native. The JSON file is lightweight and renders natively, making it perfect for smooth, scalable animations without heavy video assets.

Share article