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.
- 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.
- 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.
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 WorkplaceExport 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
- LottieFiles official website
- Supported Features
- Documentation a particularly useful section for designers After Effects
- Color management in Figma desktop app
- Color management in After Effects
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.