Using Anima with Figma auto layout doesn't give responsive design

I am using Anima to convert a design which was given to me from a designer. The designer has implemented Auto Layout into some elements, when I increase the width of the main element in Figma everything works fine, but when I export it to anima and there I try to increase the width it gives white spaces and not the responsive design I have. I have saved and synced my project.
Will kindly appreciate help, because I am at my break point :frowning:

Hey @ziruzavar thanks for reaching out and explaining all of that! I’m sorry to hear it. I’d be happy to check out your design and see if I have any tips for how to help. Would you mind sending me your file here? Or you can make a simplified version to attach here that shows the same issue. Thanks :pray:t3:

Hey @Shira I am attaching the code for the Project and 2 videos that same the responsive design in Figma and then the same design not being responsive in Anima. EDIT I can only comment 2 links in one post. I am leaving the videos here.

Hey @ziruzavar thanks for sending. I can’t troubleshoot without your actual Figma file, but already I can see that you’re not using auto layout in your Figma design. I’d suggest checking out this Best Practice article, and adding auto layout to your design :+1:t2:.

Then try re-syncing to Anima and your page should be responsive :slight_smile: Let me know how you go!

The problem is that I am using auto layout as I mentioned in the first comment and the design is responsive in the clips I have shared -


https://lucky-term-7205.animaapp.io/enskai-landing-page-v4-responsive?r=1&p=nrie5uy&h=enskai-landing-page-v4-responsive&pages=WyJlbnNrYWktbGFuZGluZy1wYWdlLXY0LXJlc3BvbnNpdmUiXQ== this link should work

Thanks, this link just takes me to this page in your Anima project, I meant the actual Figma link.

Either way from the screen recording you sent, it looks like you may have applied auto layout to the specific sections of your design but not to the main frame itself. Try adding it there and see if that helps!

Hey again @Shira , thank you for your patience, it’s just my first time using figma and anima here is a link for the project in figma with edit privileges https://www.figma.com/file/OnklKGZoSdR7YHdVDxJvyu/Untitled?node-id=1%3A2&t=7C0CRtsec8ccDxxX-1
I haven’t applied to the main element you are right, but when I do the whole design breaks and with auto layout to the other elements the design is being responsive in figma and it looks good.
Thanks again!

1 Like

Hello Ziruzavar!

Shira is correct, you would need to apply Auto-Layout to the entire design.
May you please email me at: support@animaapp.com

That way we can explain to you how to fix this in more detail :slight_smile:
Thank you!

Hey Andreas, thank you for the response, I will talk with the designer and will she what she can do. I was just curious why it needs to be applied on the whole layout, right now it’s responsive enough for my needs.

Well in order for auto layout to work on the whole page/frame, you have to apply it to the main, parent frame, not just the sections inside. This is best practice for Figma and therefore Anima as well :slight_smile:

I can’t troubleshoot without your actual Figma file, but already I can see that you’re not using auto layout in your Figma design.I haven’t applied to the main element you are right, but when I do the whole design breaks and with auto layout to the other elements the design is being responsive in figma and it looks good.
Thanks again!

1 Like

Hey @YoGet9ouere, it’s possible that the design seems responsive in Figma when you only apply auto layout to specific elements, but the way Anima interprets it and translates it into code requires auto layout to be applied to the main frame as well. Your design also has layers expanding outside the main frame, perhaps this is affecting the results as well.

Even though it ‘breaks the design’ when you apply auto layout to the main frame, you should be able to reorganize it to the layout you’d like, feel free to check out some of our resources that can help you get more acquainted with auto layout, and Figma has some great materials as well!

I am also looking for any best app for it but I can’t troubleshoot without your actual Figma file, but already I can see that you’re not using auto layout in your Figma design.

Hey @YoGet9ouere let me know if you have any other questions for us! Thanks

I have this same issue and even though it was resolved by changing the entire page to auto layout, I then lost the possibility of a fixed header, which is necessary. The fixed position function does not work.

1 Like

Hello!

I already replied to your comment on a different post.
Just in case, please send us your figma file to support@animaapp.com to take a closer look

Thank you :slight_smile: