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
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?
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?
@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!
@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.
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)
If you’re facing trouble to export your Figma design to a Lottie animation.
One potential issue to consider is that your animation might include elements or features that are not compatible with Lottie. Please have a look at this supported feature list and see if you’ve incorporated any of these unsupported features: Figma to Lottie Supported Features
I would also recommend you to read through this article for useful tips and best practices to get better export results: Figma to Lottie - Best Practices
Hello,
I’m experiencing this issue as well, and I’m pretty sure that, in my case, the problem isn’t related to an unsupported feature. My first attempt to export an animation to Lottie worked, but when I tried another one, the LottieFiles preview showed a blank canvas with the refresh button loading endlessly. I then retried the first one (without making any changes) and encountered the same issue again. That’s quite strange since I didn’t make any changes to my first animation, and the export worked perfectly the first time.
EDIT : I just created a flow starting point and it solved the problem !
Hi,
I am using Lottie for the first time. I have a little animation and in Figma it works well, but when I try to export it to Lottie it has this weird behaviour, where some of the elements are in another colour and you barely see them. Does anyone know why this happens?
I’m using the Lottie plugin to “insert as gif” into a frame in figma. But it is only inserting a blank rectangle with no content even when played in prototype mode. Ive confirmed all opacity & transparency setting are set to “visible”. Animation shows correctly on Lottie website and within plugin. How can I get animations to actually show up when inserted?
I’m having similar kind of an issue. Do you have any plans about adding a “tell user what is incompatible” -feature? That’d be awesome. I know you have a long list of supported features, but I’ve read it through many times but cannot find the reason for my problem. Would save so much time if I wouldn’t have to guess what’s wrong…
My issue seems to have something to do with a image-filled shape. In your documentation, it says that these should be supported, but seems like they aren’t. I believe that my ellipse is filled with the image in the way it’s supposed to be:
As a result, the preview is blank. This is a single-frame approach.
The weird thing is that if I try a multi-frame approach by splitting the phases to different frames, add the transitions and the flow starting point, and try to export the prototype flow to Lottie, it says “Couldn’t create animation as your selection may have unsupported elements.”. So now it suddenly finds the contents incompatible.
However, if I just choose all the frames (instead of the prototype flow) and try “Export to Lottie”, it does show the flow, but backwards. So after all, it is capable of showing the frames, but for very weird reason, it does not follow the transitions. I tried to change the transition directions, but it still shows the flow backwards. I also reversed the frame order in the layers panel, but it didn’t help.
Any ideas what could be wrong?
EDIT: Found the reason In my case, I wanted to add new elements in each frame, but did not realize that – for Lottie – having a hidden element is totally different than having a visible element with 0% opacity. Once I changed my hidden elements to visible 0% opacity elements, everything worked as expected.
In my case, I wanted to add new elements in each frame, but did not realize that – for Lottie – having a hidden element is totally different than having a visible element with 0% opacity. Once I changed my hidden elements to visible 0% opacity elements, everything worked as expected.