Responsive design works on preview but not in HTML

Designer Topics Figma
1

Hi, as the title says, I have a project that works perfetly on the preview and in the anima app, but once I download the HTML code & open it in the browser the desing is not resposive anymore.

I tried downloading an old project that worked perfectly on anima and in the browser, and surprisinly the same error happened. We are using the figma constrains & the same workflow we’ve use before with anima, but suddenly it doesn’t work anymore. I wonder if there is a bug or any changes in the way the design should be done in figma?

1 Like
2

Hey @Alondra thanks so much for writing. There was a slight issue yesterday with exported HTML code, could you try doing a hard refresh and exporting it anew (make sure to select HTML ‘flexbox’) and let me know if it’s responsive this time? Thanks!

3

Hi, thanks for the answer!

I tried again today but still have the same issue, I selected HTML flexbox but it is still not responsive once I download the HTML file.

4

I’m sorry to hear that :confused: Are you using responsive breakpoints, constraints, or both?

Do you have an example Figma file you can share here where the exported HTML isn’t responsive? That way I can try it out myself and see if I can find the solution :muscle:t2:

5

Hello,
I am also having the same problem. Was a solution discovered?

6

Hey @pamela are you still experiencing this issue when you resync you project to Anima? Are you able to share the Figma file so that I can check it out? Thanks!

7

Hi Shira, I am sorry but I have the issue with an XD file, I’ve shared it on the Anima chat a few days ago, can you please check into it and help me? Thanks

8

I have a similar problem with keeping my design responsive while exporting code from Anima. I selected to use Figma constraints and the design is responsive when I export it from Figma to Anima, but once I export code from Anima and open the html link, the site doesn’t scale when I expand screen width.

Here is an example I made to show the issue I’m having. You can see from the screenshots that the design is responsive in Anima but once you export the code and open the html link, it’s not responsive anymore:

Anima responsive site test
Anima responsive site test3574×4000 206 KB

Here is a link to the Anima file:
Anima file

Here is a link to the Figma file:
Figma file

Does anyone have a solution to this problem?

9

Hello Sashenka!

Thanks for your comment!
I see that on test file you sent me, there are no Auto-layouts assigned.
We always recommend using Auto-Layouts as it helps you when creating responsive design.

If you would like me to, I can offer you a short tutorial on how to do this, you can simply email me at: andres@animaapp.com

Thank you very much!

10

I have the same problem. I converted the whole page to auto-layout as recommended, but I then can’t have a fixed header, which seems like a basic functionality :upside_down_face:

I know there is a bug in Figma that fixed element loses the choice of scale of left-and-right as constraints. Their workaround is to first loosen the element select scale or left-and-right and then “fix” them. Could this be the reason for this issue?

Absolute position does not fix the problem

1 Like
11

Hello!

Thank you very much for your message!
May you please share your figma file as well to support@animaapp.com?

That way I can take a closer look at the issue you are facing exactly and suggest solutions.

Thank you very much!

13

Hello,

  1. My site looks good on preview in terms of responsiveness but not on a browser…
    can I ask what I am not doing right?
  2. Also, I have embedded 2 types of font but only the first one works in terms of text height… is there a way I can solve this please?

Thank you!!
ps I use Anima on Adobe XD