Export not on the same size that the component

[DamienS]

Hi everyone 🙂

I have an issue regarding exports.
When I export some components, the file is not on the same size (few pixels more) than the original.
For example, you can see that this component is 512*512

When I export it, it is 513*519:

It's a big issue for me as it is a visual used for the App Store / Android. So it must be pixel-perfect 😕

Thanks for your help!

Damien

[Rishabh_Tiwari]

Hi there,

Thanks for reaching out. We will need to test this on our end, so could you please confirm what preset you selected in Export For and Designed At? Also please confirm the version of Adobe XD, we'll try our best to help you with it.

Regards

Rishabh

[DamienS]

Hi Rishabh,

Thanks for your reply!

Well actually this problem is on every export of a lot / selection that I do: PNG / Design or Android, JPG, etc.

And as you can see, there is a layer around the export, I don't know why =>

I  checked every layer of the component (pattern, color, AppIcone-Spades_img, etc.), there is nothing that is more than 512*512 or going outside the artboard.

For now, the only solution that  I found is to export the artboard, instead of the composent. But it is not convenient at all for my developers as they use to export all the components of this XD files when they need to upgrade our app files. So it makes them do a special process only for those ones...

Thanks a lot for your kind help,

Damien

[Kenneth Kawamoto]

One possible theory is that your artboards and/or elements are not placed on a whole pixel position - I see the Y location is 904.99 in your screen shots - can you try fixing that and see if it helps?

[Spas K.]

The only thing I can think of is that you probably have a shadow applied on one of these elements that extends outside the bounds of the selection.

It isn't included in the bounding box when you select the group/component, but it is probably included in the export. Select all elements and make sure you don't have any shadows applied on anything, and see if its still happening.

[DamienS]

Hi @kenneth and @dstoic, thanks for your replies!
I tried both of your solutions, but unfortunately nothing worked 😞 Putting the X / Y oon a whole pixel position + checking for  shadows (there is one but is less than the artboard).
I have made a file with the component, if you want to  try on your side => https://wetransfer.com/linkcomponentspades 
For information my Adobe XD is up-to-date, on Mac (30.2.12.3).

Thanks again for your kind help 🙂

Damien

[Kenneth Kawamoto]

My XD creates 512 x 512 (px) PNG/JPEG. I'm on High Sierra 10.13.6 though.

[DamienS]

When you export the assets by itself?
When you select the artboard export mode?

I know that on artboard export mode it works, but not when I choose the "Batch" or "Selected" mode. And the problem is that my XD libraries has assets that developpers export on Batch. So I can't make a special process only for those assets 😕

[Spas K. · Accepted solution]

Okay, so I exported as is, and I got 512 x 519, same as you.

The problem were indeed the shadows of the cards, apparently they extend beyond the purple square.

Once I moved the King and the Z card up a bit, I managed to export 512x512. Reducing their shadows to Y:1 Blur: 3 also does the job.

Here's the file, so you can check it out: https://we.tl/t-zGer6nuVi9

[DamienS]

THANKS a lot dstoic!!
Indeed, I didnt' see the XD Shadow on this layer :-//// You were right from the beginning 🙂
There too many issues with XD shadow (not compatible with Unity, etc.) lol.

Thanks again for your help and your time to help me on this issue!

[Kenneth Kawamoto]

Try this: create a 512 x 512 (px) rectangle and place above two groups (Img & Bgd), then select three items and create a masked group (Cmd +Shift + M). Then Batch Export. You'll get 512 x 512 (px) image 😄

[DamienS]

Thanks Kenneth for your kind help 🙂 Dstoic was right, it was because of a XD shadow on one of my layer 😕
But I did your MacGyver solution just before that 😄
Thanks again!!