Highlighted

[Share]-XD prototype vs actual CSS difference in XD

New Here ,
Mar 23, 2020

Copy link to clipboard

Copied

When I design something in adobe XD and try to convert it in HTML and CSS. The size of the output is much bigger.

 

Let's say I've to create a box, I create it in XD and get pixel value of it.

 

When I style it in CSS, the result is different than the actual XD prototype.

 

.square {

height: 50px;

width: 50px;

}

 

The above CSS is the example. And this CSS gives different result than the actual XD design.

 

Note: I am using default artboard size for desktop.

 

Sorry for bad the English and explanation 😄

 

[Moved from Community Help (which is about the forums) to a better forum... Mod]
[To find a forum for your program please start at https://community.adobe.com/]

Thank you for sharing the screenshot. Would you mind trying to zoom out to 100% and check monitor resolution as well?

 

Let us know if that helps.

 

Thanks,

Harshika

TOPICS
How to, Share or publish

Views

179

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

[Share]-XD prototype vs actual CSS difference in XD

New Here ,
Mar 23, 2020

Copy link to clipboard

Copied

When I design something in adobe XD and try to convert it in HTML and CSS. The size of the output is much bigger.

 

Let's say I've to create a box, I create it in XD and get pixel value of it.

 

When I style it in CSS, the result is different than the actual XD prototype.

 

.square {

height: 50px;

width: 50px;

}

 

The above CSS is the example. And this CSS gives different result than the actual XD design.

 

Note: I am using default artboard size for desktop.

 

Sorry for bad the English and explanation 😄

 

[Moved from Community Help (which is about the forums) to a better forum... Mod]
[To find a forum for your program please start at https://community.adobe.com/]

Thank you for sharing the screenshot. Would you mind trying to zoom out to 100% and check monitor resolution as well?

 

Let us know if that helps.

 

Thanks,

Harshika

TOPICS
How to, Share or publish

Views

180

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
Mar 23, 2020 0
Adobe Employee ,
Mar 24, 2020

Copy link to clipboard

Copied

Hi there,

 

Thank you for reaching out. Is it possible for you to share a screenshot showing the difference? Is it happening with this specific file or all the files?

 

We will try our best to help.

 

Thanks,

Harshika

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
Reply
Loading...
Mar 24, 2020 1
New Here ,
Mar 25, 2020

Copy link to clipboard

Copied

XD (2).pngXD (3).pngXD (1).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
Reply
Loading...
Mar 25, 2020 0
Adobe Employee ,
Mar 25, 2020

Copy link to clipboard

Copied

Thank you for sharing the screenshot. Would you mind trying to zoom out to 100% and check monitor resolution as well?

 

Let us know if that helps.

 

Thanks,

Harshika

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
Reply
Loading...
Mar 25, 2020 0