3 paths with LottieFiles to master motion design | by Nicolás Del Real

[ad_1]

Let’s get serious now with After Effects. Along with the LottieFiles Plugin, AE is a great tool to craft complex animations with the usage of masks, parenting and formulas. And even though the tool feels intimidating at first sight, you just need to focus on the features needed to build a Lottie compatible animation, which are still really friendly for animations that need a little bit more of motion muscle.

Step 1. Export SVG files

We’ll start by taking out our SVG file from Figma and importing it to Adobe Illustrator. To get this done just group all your assets and export them as SVG. Then drop the file in Adobe Illustrator to start cleaning vectors.

There are also some Plugins that can help you ease this step and go directly to After Effects. We will cover the manual importing path here.

Step 2. Clean Assets with Adobe Illustrator

As in the previous paths, remove any unnecessary elements or layers that are not required for the animation. If necessary, optimize paths and shapes with Object > Path > Simplify. Set each object in separate layers that will be animated independently or as childs from other parent objects.

Step 3. Import to After Effects

Launch Adobe After Effects and import your illustrator file as a “Composition” with the “Document Size”, so you get a Pre-composed scene with all your assets, named in different layers, the exact size you had in Illustrator.

Great! We are almost ready to animate this last unicorn.

Step 4. Convert to Vectors and Clean Layers

Layers will be imported as Adobe Illustrator Layers. Since we need them as vector layers, we will convert them to shapes with right click, then Create > Create Shapes from Vector Layer.

Once you get the blue layers, start setting the color of each layer. That will help you quickly identify the objects you are animating in the timeline. Also clean the objects inside each vector object. At first, your file should just have Path, Stroke/Fill and Transform on each vector layer. You can erase the Illustrator layers at the end to get a cleaner file.

Now set the parent/child relations of each layer according to the desired movement you need for each object in your project.

Now we are ready to animate this cute thing.

Step 5. Animate & Preview

Since it’s a really robust tool, I won’t get deep into each functionality applied to get this animation.

Most of the motion was solved with basic Rotation, Scale and Position effects on specific keyframes. Here are some samples of each of these keyframing and easing applied.

Legs and paws needed to rotate a little bit to get the stretch effect.

Scale was needed to make the eyes and nose feel like moving back

Several positions were customized so the unicorn could go up and down on each stretch.

This is the animation so far in After Effects.

Step 6. Export to Lottie

You can hit the “Refresh” button if no render options are being displayed. Once you have the composition on the list, select it and click “Render”.

Select the asset that will be sent to Lottie and hit “Upload”. Select your destination folder and wait for Lottie to get your animation converted to JSON.

Here is the final output. Note how the weight of the file is lighter that the Figma way and almost as light as done in Creator, even though it has way more animation going on, as it was done with more delicacy in After Effects.