From Figma to Lottie: Building a Character Animation Without After Effects
I spent today building a looping character animation intended for use in a mobile application. The pipeline is entirely browser-based: vector artwork constructed in Figma, the animation applied in Lottie Creator, and the final output a Lottie JSON file ready to embed. No After Effects, no Bodymovin, no desktop software of any kind. The decision to keep the workflow in the browser was deliberate, and it held up for a project at this scope without requiring any workarounds.
The foundation of any Lottie animation is the vector artwork, and getting that right before touching the animation tool determines everything that follows. Vector graphics are not just a file format preference; they define what the animation engine can actually do. Each shape in a Lottie animation is individually addressable, meaning it can be moved, rotated, scaled, or faded independently from every other shape in the file. That is only possible because the artwork is made of discrete vector paths rather than a flattened raster image. For this character, every body part was traced manually using the Pen tool in Figma against a reference illustration. The result is a clean set of distinct paths, one for each component of the character, each capable of being animated on its own track once the file is in Lottie Creator.
Lottie Creator reads the imported file and maps each named layer to its own track in the animation timeline. From that point, the character is no longer a drawing. It is a structured set of objects, each with its own animatable properties: position, rotation, scale, and opacity. The animation model is keyframe-based, meaning you set a property value at one point in time, set a different value at another, and the engine calculates the motion between them during playback. This is structurally different from frame-by-frame animation. You are not drawing every state the character passes through; you are defining the states that matter and letting the software handle the transitions. The result is animation that stays compact enough to embed in a mobile app as a JSON file and renders at any resolution without quality loss because the underlying artwork remains vector.
The export from Lottie Creator is a single JSON file containing the complete vector artwork and all keyframe data in a format the Lottie runtime interprets on any platform. On iOS it loads via lottie-ios, on Android via lottie-android, and on the web via a script include, with only a few lines of integration code in each case. The transparent background means the host application controls whatever visual context surrounds the animation. A character animation that would have required a dedicated desktop pipeline a few years ago now ships as a single file produced entirely in a browser. The scope of what browser-based tools can handle continues to expand, and for projects in this range, the toolchain is no longer the constraint.