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!

2 Likes

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:

1 Like

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!

Hi @Gayani_S ,

Thank you for your response!

Apologies as I couldn’t get back to you earlier.

I believe that was a small glitch at that time. Everything works fine now.

2 Likes

I mentioned this in another thread.

@Gayani_S Auto Layout is affecting Smart Animate when hug contents is in use on the main background frame that bounds all the contents. Here’s a video of the difference. I am happy to share the file with you. Could you send me your email so I can add you as an editor to the file?

Smart Animate

Instant (No glitch)

1 Like

Hi Figma team,

This issue still exists. I recorded a loom video demonstration for your team to review.

TL;DR
I agree with the above comments. There’s something interacting between a Smart Animation that changes from a fixed height to an auto height that, when used within a frame with auto layout applied, causes the prototype preview to briefly jump to the top of the screen.

Hey everyone!
Working closely with Gayani, as mentioned, we’d like our support team to investigate further your issue.
Please reach out directly to our support team so we can better follow up your case: here
Be sure to use your Figma email account, and please include your video clip, and add support-share@figma.com as an Editor, so they can take a closer look. Thank you :pray: