The auto flex screen width doesn't work and give over 3000 pixel width

Designer Topics Adobe XD
1

While the preview is good.

The exported codes give a over 3000 pixel width on destop browser for all screen size, even I have chosen the auto flex option. I can’t attached the exported code here, so I can only show the screen.

Screen Shot 2022-04-17 at 17.53.07
Screen Shot 2022-04-17 at 17.53.071920×972 93.2 KB

2

Hey @dickhfchan thanks for reaching out! What is the original size of your XD artboard? If you could send me either your design, or a simple XD file with the same problem (you can send here via WeTransfer if it’s heavy!) and I’d be happy to investigate this for you, thanks :pray:t3:!

3

Also, have you added responsive constraints and breakpoints in XD?

4

Hi Shira, thank you for your help.

One more issue I found, I can’t upload artboard one by one. Anima upload all artboards in one batch and merge two artboard into a single page.

5

Thanks for sending your file, I see what you mean!

It looks like your artboard in XD is set to 3840 px

image
image1920×1523 163 KB

which explains why it exported so large. You can adjust the artboard size to whatever you prefer in XD and then resync to your Anima project and export the code again.

And regarding all of your artboards uploading together, this is because you added all 4 artboards together as ‘1 page’. Actually, you want to add the 2 separate page’s breakpoints separately, so it would look like this for one page:

image
image1274×1618 86.6 KB

Check out this video and article to learn more about adding breakpoints and let me know if you still have any questions afterwards!

6

Hi Shira,

we manage to change the size of artborad from 3000 to 1980, it works for 1980 screen but not for 720 screen, we want the screen to be responsive for laptop which may be 720 to 1908 for widen desktop screen. what is the setting we need.

Regards,
Dick Chan

7

attached are the XD files

8

Cool thanks for sending those @dickhfchan! Actually, your synced project in Anima will only be responsive if you first set it up in Adobe XD. I suggest checking out how to use XD’s ‘Responsive Resize’ feature, here’s a video about XD that I found but you can look up some more to get the full picture :sunglasses: .

Once you set up the responsive resize for your artboards, you can test it in XD by dragging the full artboard to be smaller/larger and see if it’s responsive. If so, then resync to Anima and you should get the same results there :slight_smile: Let me know how you go!