Skip to main content
Lougin_Habil
Apr 13, 2022 7:58 AM UTC
Question

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!

This topic has been closed for replies.

15 replies

keithrlim
Sep 11, 2022 1:39 AM UTC

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!

Avokadomos
Figma Ambassador
Figma Ambassador
Sep 11, 2022 6:45 AM UTC

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

Disclosure: I’m part of Figma’s Forum Ambassador program.
Benjamin_Samson
Dec 22, 2022 3:00 PM UTC

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 😉

Clare
New Participant
Mar 23, 2023 8:24 AM UTC

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!!

Apr 19, 2023 11:46 AM UTC

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

Feb 21, 2024 2:15 PM UTC

I’ve the same problem!

Gayani_S
Figmate
Community Support
Feb 23, 2024 1:59 PM UTC

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!

Benjamin_Samson
Feb 26, 2024 8:42 AM UTC

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.

Gayani_S
Figmate
Community Support
Feb 29, 2024 3:55 PM UTC

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).

Apr 5, 2024 4:19 AM UTC

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!