Issues with Figma's Export to lottie

Lottie in Figma
1

In my Figma file, I’ve been working on a UI animation between a few different frames (input typing, autofilling, search results… etc). As I’m trying to use the “Export to Lottie” feature in the Figma plugin, for some reason the LottieFiles preview shows a blank canvas.

I’ve tried, regrouping my frames adding an additional parent frame to wrap my layers, and adding a bg fill to the parent frame but none of my layers display in the preview sequence. Has anyone experienced a similar issue? I’m out of ideas to make it work :melting_face:

2

Hey @Eric1

Have you checked if your animation has any of the unsupported feature? You can check out the list of supported features here

Here are some tips on how to get the best result

If you’re still facing the problem, can you please share the figma design file to support@lottiefiles.com so that our team can help to investigate this further?

Thanks!

3

Hey there, I face the same issue, but I am a bit baffled as if i pick a single SVG and go for ‘Export to Lottie’ it animates tjhe svg i.e. moving around some shapes. But if i pick a multiple frames of the same svg then the ‘Export to Lottie’ displays white canvas in preview. As of the suggestion above, I just thought that if the issue is with supported features then it shouldn’t work even with a single svg :'0

FYI: Svg consists only of Lines + Vectors + a single Subtract
BUT i have just tried it with a dummy SVg that consists just of 4 lines, and the same issue persists

P.s. @Eric1 if you have managed to identify the issue, could you please share the findings with us?

4

@9_ti_tashka Thank you for sharing your experience with the Lottie export issue.

To better assist you and investigate the problem, could you please share the Figma design file so we can try to reproduces the issue? This will help us take a closer look at the SVG structure and potentially identify any specific elements or configurations causing the problem. Once you provide more details, we’ll do our best to assist you in resolving the issue. Thank you!

5

@haleeza thanks for you reply! I actually found a fix, and apparently if you import svgs as an iamge then the issue is resolved

2 Likes
6

@haleeza I am currently facing the same issue. At first I didn’t get a blank canvas, it animate the frames well, then I tried adding a new frame in which I got a blank canvas with no animation, even after I tried deleting the newly added frame it still displayed a blank canvas.

7

could you please share the .figma file to support@lottiefiles.com so we can help to investigate this issue further?

10

Hi @haleeza

Is posible that the bounce effect from figma is not available for export with Lottie?
I’m trying to export and looks like a fade transition instead of bounce (on figma prototype mode works correctly)

Regards

11

Hi @Mauricio,

We have not yet implemented support for physics-based spring animation effects such as bounce.

Currently, the workaround is to manually create frames and draw the bounce effect.

Rest assured, integrating these effects is on our roadmap. We’ll keep you updated on its progress and notify you once it’s fully supported :slight_smile:

12

Ensure layers are properly nested, grouped, and visible. Check LottieFiles settings for any compatibility issues with Figma exports.