Skip to main content
Lougin_Habil
April 13, 2022
Question

Auto layout x Smart Animate

  • April 13, 2022
  • 15 replies
  • 1811 views

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
September 11, 2022

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
Active Member
September 11, 2022

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

Benjamin_Samson
December 22, 2022

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
March 23, 2023

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

April 19, 2023

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

February 21, 2024

I’ve the same problem!

Gayani_S
Figmate
Community Support
February 23, 2024

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
February 26, 2024

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
February 29, 2024

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

April 5, 2024

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!