articles, March 27, 2024

Smooth Animation Handoff: Tips to Prepare and Transfer Animations from Designers to Developers

Irina Lemeshevskaya | UX Designer at Coherent Solutions Poland

Smooth Animation Handoff: Tips to Prepare and Transfer Animations from Designers to Developers

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

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;
  • reating animation in Adobe After Effects;
  • transferring animation to developers using Lottie.

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


Preparing Illustrations in Figma

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 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 Effect
  • Try 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.
boolean operators
  • 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.
illustration from Figma

Transferring Illustration from Figma to Adobe After Effects

Consider using the AEUX plugin 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).

Creating 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 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

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.

How to View the Resulting .JSON

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

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

Share article

Get a Free Consultation with Our Experts!

Simply fill out our contact form below, and we will reach out to you within 1 business day to schedule a free 1-hour consultation covering platform selection, budgeting, and project timelines.

This field is required. Maximum 100 characters.
This field is required. Maximum 100 characters.
This field is required.
Only digits are applicable.
Maximum 2000 characters.
* Required field

An error occurred sending your message.
Try again or contact us via

Message sent!

Here's what happens next:

  1. Our sales rep will contact you within 1 day to discuss your case in more detail.
  2. Next, we will arrange a free 1-hour consultation with our experts on platform selection, budgeting, and timelines.
  3. After that, we’ll need 1-2 weeks to prepare a proposal, covering solutions, team requirements, cost & time estimates.
  4. Once approved, we will launch your project within 1-2 weeks.