Skip to main content
Solved

Help for Animations with Auto Layout

O

Hello, I’m grappling with animations in Figma and trying to figure out how to manage Auto Layout. My issue is that when I animate elements that change size, I can’t seem to maintain the control I desire.

Is there a correct method for animating with Auto Layout without deactivating it? I like to create a prototype that is responsive and easily modifiable, and it’s crucial for me to keep Auto Layout active.

I would appreciate any advice or solution you can offer!

Thank you in advance for your availability.

Best answer by oscar12

Hello @Junko3,

Thank you very much for your willingness to help. I have reviewed the links you shared, but unfortunately, they do not address my specific issue. The animations mentioned in those links are quite simple and do not interfere with the Auto Layout.

My goal is to create more complex animations where elements expand and contract, creating a variety of visual effects. I’m trying to include a link that shows an example of the problem.

Test Animation

This issue can occur with buttons within an Auto Layout: when clicked, they start an animation that changes their dimensions. This causes other elements in the layout to shift, as they must maintain a certain distance from the button that is shrinking. The only solution I know of to avoid this problem is to not use Auto Layout, but this limitation prevents me from creating easily modifiable prototypes. To implement certain animations, I have to forego the benefits of Auto Layout.

I would like to better understand the correct approach to creating a prototype and the limitations of Figma in this context. Unfortunately, I can’t find video tutorials that go into depth on animations, which makes it difficult for me to understand where I’m going wrong.

I hope I have explained my problem clearly. Any suggestions or guidance would be greatly appreciated.

View original
This topic has been closed for comments

3 replies

J
Figmate
  • Junko3
  • Figmate
  • 1899 replies
  • May 9, 2024

Hi @oscar12, Thank you for reaching out about this! I’ve looked into it but couldn’t find any resources specifically related to that method.

I’m not entirely sure what your goal is, but Smart Animate is a prototyping action, while Auto layout is more of an editing tool. Generally, these functions don’t directly affect each other.

I did come across a couple of design files in our community that, while not exactly what you’re looking for, incorporate both Smart Animate and Auto layout. They might provide some inspiration:

​​Feel free to explore on your own! https://www.figma.com/community/

Also, if you could share more details about what you’re trying to accomplish, that would be fantastic! If possible, a quick video recording of the issue along with the file would be incredibly helpful.
This allows our community (which includes many experienced designers!) to know exactly what you’re going through and potentially be able to provide more tailored advice and suggestions.

Hope it helps! Also, if anyone in our community has additional insights of this topic, please feel free to jump in.

Thanks,

O
  • oscar12
  • Author
  • 1 reply
  • Answer
  • May 9, 2024

Hello @Junko3,

Thank you very much for your willingness to help. I have reviewed the links you shared, but unfortunately, they do not address my specific issue. The animations mentioned in those links are quite simple and do not interfere with the Auto Layout.

My goal is to create more complex animations where elements expand and contract, creating a variety of visual effects. I’m trying to include a link that shows an example of the problem.

Test Animation

This issue can occur with buttons within an Auto Layout: when clicked, they start an animation that changes their dimensions. This causes other elements in the layout to shift, as they must maintain a certain distance from the button that is shrinking. The only solution I know of to avoid this problem is to not use Auto Layout, but this limitation prevents me from creating easily modifiable prototypes. To implement certain animations, I have to forego the benefits of Auto Layout.

I would like to better understand the correct approach to creating a prototype and the limitations of Figma in this context. Unfortunately, I can’t find video tutorials that go into depth on animations, which makes it difficult for me to understand where I’m going wrong.

I hope I have explained my problem clearly. Any suggestions or guidance would be greatly appreciated.

J
Figmate
  • Junko3
  • Figmate
  • 1899 replies
  • June 13, 2024

Thanks for sharing the design file with us and thank you for waiting!

I noticed that the left one has interactive component instances(Property 1) nested within an auto layout frame(Frame 215). And those instances has an animation interaction to shrink the size when click.

It looks like everything is functioning as intended in the file you shared. Also, I really appreciate you trying out the workaround without auto layout.

I can understand why this might be confusing, I couldn’t find a specific tutorial on this topic so far, and I haven’t found any documentation outlining the best practices either.

You’ve already found a workaround, but I’d like to offer another suggestion:
In your design file, I noticed the dimensions of the Property 1 component vary between the Default (56x56) and Press (44x44) variants. If possible, consider adjusting the dimensions to be the same for both variants in your design.

I added an extra layer of the same size to each variant to help maintain consistent spacing between the icons in an auto layout frame, as shown below.

If anyone from our community has any additional workaround, please share here.

Thanks again for your valuable input!

1 Attachments
Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings