How to export the image to the area that contains all the bound boxes in XD?

New Here ,
May 20, 2021 May 20, 2021

Copy link to clipboard

Copied

I had a question about exporting to the same size after using XD.

 

for example.

 

I made square and circle in photoshop (PSD) as below inform.
Unit : px
Document : 100x100
Square :
80x80 (center in doc.)
Circle : 100x100 (center in doc.)

 

And, after import in XD. i want to png of same size (100x100)

but, i got a fit size result.

 

Circle : 100x100 

Square : 80x80

 

Is there any way to export the image to the area that contains all the bound boxes?

 

<Title Renamed by Moderator>

 

 

TOPICS
How to

Views

440

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , May 24, 2021 May 24, 2021
I see what you mean, I just don't think there's a way to automate it. If you export batch - Xd will trim each layer and it will be that layer's bounding box that's used. If you export the group - that will include all layers in one image, there's no way to export each layer separately with the group's bounding box. The only way would be to export each layer individually, and fit the artboard to the group's bounding box, but that will be a lot of manual labor for so many layers. Why don't you...

Likes

Translate

Translate
Adobe Community Professional ,
May 21, 2021 May 21, 2021

Copy link to clipboard

Copied

First, mark each layer for export in the layers panel:

image.png

 

After that, go to File > Export > Batch:

 

image.png

 

This will export all layers that have been marked for export with their bounding boxes, instead of the artboard's.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 21, 2021 May 21, 2021

Copy link to clipboard

Copied

On a second read, I'm not sure if you want to export them with their respective sizes, or you want both to be 100x100 🙂

 

If you want both of them to be the same size (with some empty space around the square), you basically have to export the artboard, not the layer. Simply hide one shape, export artboard, then hide the other, and export again with different name 🙂 Make sure to remove the fill color of the artboard, if you want it transparent.

 

 

image.png

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 23, 2021 May 23, 2021

Copy link to clipboard

Copied

First, I appreciate for your answer.

 

I can't explain detail because project security. but i need methods to export same size. I was explained you simply, but couldn't compare to above our resource is severely numerous.

 

So, your method is not meet my needs.

I looking for way that Layerset (group) layer export included all of child layers bounding box.

for example,


01. document(artboard) size is 1920x1080.
02. PSD is 100ea. (Layer is about 5000ea / Varied of size.)
03. similar resource was grouped into manual
04. Import PSD in Adobe XD.
05. ( My needs) In Adobe XD, seleting group -> export to png each layer inside group. -> png size is group layer size
* Group layer size is includ all of child layers bounding box.

 

Actually, i'm not good at english. so, i concerned whether you can do understand.

Do you happen to know solution. please, again reply. thank you!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 24, 2021 May 24, 2021

Copy link to clipboard

Copied

I see what you mean, I just don't think there's a way to automate it.

 

If you export batch - Xd will trim each layer and it will be that layer's bounding box that's used.

If you export the group - that will include all layers in one image, there's no way to export each layer separately with the group's bounding box.

The only way would be to export each layer individually, and fit the artboard to the group's bounding box, but that will be a lot of manual labor for so many layers.

 

Why don't you just export the PNGs from Photoshop? It has actions and way better automation capabilities than Xd.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 25, 2021 May 25, 2021

Copy link to clipboard

Copied

To @Spas K. 

Thank you for interest in issue.

 

Today, through your comment , I got a solution.

Fortunately, my PSD have only merge layers.

 

Simply, Use Photoshop JS to create a guide layer of the size my needs.

and make opacity to 0%, grouping match layers.

 

Since, import PSD in adobe XD.
and checking Mark for Export of want group layers.

 

As a result, i got a PNG it was satisfy my require via half-automatically.

 

--------------------------------

 

I agree sufficient with your last comment.
However, since we are considering using other graphic development tools, we have posted the issue on the forum.

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 25, 2021 May 25, 2021

Copy link to clipboard

Copied

LATEST

Oops! @ColdGHO  it was my personal account! 

( I forgot account is different home and company.)

 

anyway, thank you for your interest!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines