Auto layout x Smart Animate

Hi everyone,

I’m having an issue with compatibility between Auto Layout and Smart Animate.

I have two components, accordion lists, with several variants that collapse and expand through Smart Animate. Whenever I apply Auto Layout to the frame with the components, they lose the Smart Animate effect, the page twitches and then the accordion list expands with Instant effect.

This is a video of the issue: 13.04.2022_09.55.55_REC.mp4 - Google Drive

Thanks in advance!

1 Like

I’ve been having this issue as well, and I can’t seem to find any other threads talking about this issue (though it is a niche one). Bumping this thread in hopes of a solution!

I’m also having this issue. Will update if I find out more.

Hi there,
This issue occurs if you set your main frame to auto layout. Remove the autolayout and you won’t have the problem anymore.
But it would be better if Figma fixes this issue because autolayout on the whole page is still very convenient :wink:

This is still happening. My frame has to be autolayout so removing it is not an option. Right now I can only change the animamtion to “instant” and check the “Preserve scroll position”. Hope this will be fix!!

1 Like

I’m having issue about this as well. Hope Figma fixes this bug. :pensive:

I’ve the same problem!

Hey @Angela_Morales, apologies for the issue! Are you able to give me more information about your issue? A screen recording will be really helpful!

Also are you seeing any error message on your end? Is it happening in the browser, desktop app or both?

For quick fixes, can you please force-quit and open Figma in a new browser window (or force-quit the Figma Desktop app and restart it.) Also, please clear out the cache. Here are some information to troubleshoot: https://help.figma.com/hc/en-us/articles/360040523973-Troubleshooting-checklist 1

Thank you in advance!

Hello @Gayani_S , The video provided by @Lougin_Habil describes the problem very precisely.
Personally, I’ve found a technique that partially solves the problem: I create my page in an autolayout configured with a vertical Overflow. Then I place my page in a frame dedicated to prototyping. This frame has exactly the same size as the mockup. I resize my page placed in the frame dedicated to the prototype so that it is the same height as the Mockup. With the vertical overflow, Figma seems to have fewer problems recalculating the animations, they remain fluid and the screen no longer jumps.
This technique is a bit laborious but allows me to work with autolayout.

1 Like

Hey @Benjamin_Samson, thanks for confirming this. You mentioned you’ve found a workaround for this. But Smart Animate and Auto-Layout should not affect each other since Smart Animate is a prototyping action and Auto-Layout is an editing tool.

It’ll be helpful if you can share a copy of your file with me if possible, so I can take a look at it. Also, please invite support-share@figma.com directly as an editor (this won’t affect your billing at all).

Hi @Gayani_S,

I also face the same issue. Smart animating components work well when placed individually but doesn’t work when placed in an auto layout frame. Is it an expected behavior? I would appreciate your help in this.

Thank you!

Hey @Nivetha_Vasu, thank you for reaching out!

As I’ve mentioned before Smart Animate and Auto-Layout should not affect each other. I’d also recommend reaching out to our support team with a copy of your file via this form.

Please invite support-share@figma.com with “can edit” permission to your file so our support team can look into this further. Note that users with @figma.com emails on your team do not count towards your billing.

Thanks in advance!