How to boost your Lottie animation workflow
Your UI design isn’t a Disney movie with full all-around animation — but that doesn’t mean you can’t use Disney magic, right?
If you work on UI/UX design, you may hear a lot about micro-interaction, icon animation, onboarding screen, loader, etc. This type of animation is like Disney magic that helps your app look more alive and feel fluid. This isn’t new — and it’s only getting better with new tools, such as Bodymovin and Lottie, that help animators and designers create beautiful work without the need of having coding skills.
First I discovered these tools 2 years ago and play it around since then, and here is the quickest Lottie animation workflow in my opinion. Well, let me show you…
The Quick Workflow
Vector Design > Figma/Sketch > AEUX > After Effect > Bodymovin > Lottiefiles > Implementation
Plugin needed to install
Bodymovin, AEUX, optional : Lottiefiles (Beta)
1. Finalized your design in Sketch App or Figma
As a user of Adobe products, I believe Adobe Illustrator is the best vector tool if you are using After Effect because it’s on Adobe ecosystem right?
Indeed, After Effect with Illustrator are a perfect match but if you want to Lottie Animation you will end up facing a problem what I call it is “Group 1 Disaster”
Bodymovin only supports shape layers and not vector layers, so before you do the animation you need yo convert it from vector layer to shape layer by Right-Click on layers > Create > Create shape from a vector layer.
This is when “Group 1 Disaster” appears, the problem is happening because AE cannot damn translate very well when the vector layer converted to the shape layer, and you need to delete “group 1 & merge path” on each layer and imagine you have a hundred layers on your design.
First, copy your design to Sketch App or Figma and create a group on the layers that you want to combine when doing animation and don’t create a group if you want to do animation separately.
So you can use your own preferred vector design software, because for finalize it will be from SketchApp or Figma
2. Import to After Effect, and save a lot of time
After you finalize your design in Sketch App or Figma you can export it to Adobe After Effect by using AEUX Plugin, download here.
This plugin will eliminate the “group 1 disaster” and you need to install the plugin both on After Effect and Sketch App, if you are using Figma you just need to copy the link (Share > Copy Link) and paste the link on this address figma.aeux.io, and how to export?
Sketch App
Select the artboard to export all inside of them and size of artboard will be the same size of comp or select objects and the selected size will become the same size of comp, to export from AEUX Plugin simply click “Send Selection to AE”
Figma
Go to figma.aeux.io and authenticate your Figma account, on your Figma project screen click share > Copy link and paste the link on Figma Converter (use Chrome if Safari not showing the action) then you can see all artboard/frame of your design, choose your frame and click download (JSON). Simply drag downloaded JSON to AEUX plugin panel on After Effect, AEUX will automatically creating the comp
AEUX Plugin Setting
There is some setting that you need to know on AEUX plugin:
Comp size Multiplier
This action will multiply your size or resolution design artboard/frame from the original size or resolution on SketchApp for Figma, choose 1X if you want the original resolution/size
Precomp groups
This checkbox action will create a pre-comp on every group that you created before on SketchApp or Figma. if you unselect it, every shape inside a group will appear on the same comp but parented on a group layer
3. Animate, Preview & Export
Before you start animation you must be knowing what features are supported by each platform because some of the features on Android might be not supported on iOS, you can also check on Lottie Documentation
After you do animation, open Bodymovin plugin on After Effect to export your animation into JSON file, to do that select your comp and you can search comp by name, set destination export by click on 3 dots and hit render, there is also setting menu to set some properties/features that you can use like export to the old format for backward compatibility
To preview your render you can go to the preview tab and browse to JSON file or just click to preview your last render, there is a slider to view your animation across the timeline, or you can go to LottieFiles website to preview you JSON by simply grad it to the site and there is also QR code that you can use to preview on mobile, you need to install LottieFiles app to preview, download here: Android & iOS
You can also use LottieFiles Plugin on After Effect, you need a LottieFiles account to use it. With this plugin, you can render and preview without need to leave After Effect and then you can also publish or upload to your LottieFiles account directly from this plugin, more time save right?
Start to implementation
To implement your animation into an app or website you can check all of the documentation here.
Thanks for reading! I am Daris Ali Mufti a UI UX Designer based in Jakarta Indonesia. Still a lot to learn! any insights, differing opinions, or advice are always welcome. I am always open to having a dialogue with others and recognize that I am not an industry expert just yet.
