Troubleshooting Figma to Lottie
Fix common Figma to Lottie render failures, unexpected output, and missing interactivity.
Most Figma to Lottie issues come from a mismatch between the Figma scene and what the converter can reliably turn into Lottie output.
Render fails
Check for:
Unsupported Figma features.
Missing or reordered layers across frames.
Component instances or external library colors that do not convert cleanly.
Stacked fills, gradients, strokes, shadows, or effects on one object.
Text changes inside the same matched text layer.
Animation looks different from the Figma prototype
Some Figma transition behavior is approximated for Lottie output. Spring-based easing can feel slightly different, non-Smart Animate transitions may preserve timing but not exact visual behavior, and renderer differences can affect gradients or effects.
State machine is not available
The prototype may use unsupported interactions or actions. Replace unsupported actions such as back, close overlay, open overlay, swap overlay, scroll to, or URL actions with supported navigation-style transitions when you need interactive export.
Click or hover does not work
Check that:
The interactive element is a frame, not only a group.
The interactive layer is visible enough to receive interaction.
Layer names match in the exported animation.
You exported as
.lottie.The app uses a dotLottie runtime, not
lottie-web.
Text changes cause render failure
Do not change text content within the same matched text layer across frames. Create separate text layers for each text value and toggle visibility instead.
Gradient or effect renders incorrectly
Use simple gradients and avoid duplicate or stacked gradient fills. Angular and diamond gradients are not reliable for export.