Highlighted

Sharing Adobe XD specs with developers sizing inconsistency

New Here ,
Dec 30, 2019

Copy link to clipboard

Copied

Hi, I've been "sharing for dev" to publish a link for our developers, but there's visual inconsistency with the specs that's published from Adobe XD with the published version (font sizes, component/button heights are generally larger than how they appear in XD)

 

Since I've heard that a good rule of thumb for minimum font size is 16pt for web, I designed and published everything with 16 pt. It looks great on my computer, but as our developer is trying to recreate it, everything looks huge. Am I missing some exporting setting or am I supposed to always design at 100% view (while referring to my prototype at 100%?) I don't want to recreate everything in a smaller version.

 

Thanks!

 

 

Screen Shot 2019-12-30 at 5.16.59 PM.pngScreen Shot 2019-12-30 at 5.18.07 PM.png

Adobe Community Professional
Correct answer by Peter Villevoye | Adobe Community Professional

For the design stage, you just stick to those good old 72 dpi related points and pixels, for font sizes and element sizes – anything and everything. However, how this turns out for the technical implementation, is a matter of concern for the front-end developer. If he or she (or anything in between) isn't capable of translating these sizes to proper settings and specs in the HTML and CSS frameworks they're using, then it might be time to look for a more routined developer, in stead of adopting this task as a designer.

 

Something obvious like the (font) size seems like a very clear and almost trivial aspect, but it is in fact a very complicated and delicate matter. And to make it worse: systems and users can even impose their own settings or preference as an influencing factor. So you're often not very sure of the exact rendering size of anything. That's why you as a designer need to anticipate for some flexibility and a decent margin in all the sizing you apply. Your 16 pixels or point sizes may be a good starting point, but keep in mind that websites (and web-based apps as well) will always have a mind of their own...

 

Want to know more about the origines and reasons for this chaos ?

https://learnui.design/blog/ultimate-guide-font-sizes-ui-design.html

https://learnui.design/blog/font-size-principles-resources.html

TOPICS
Code, Desktop, How to, Import and export, Share

Views

591

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

Sharing Adobe XD specs with developers sizing inconsistency

New Here ,
Dec 30, 2019

Copy link to clipboard

Copied

Hi, I've been "sharing for dev" to publish a link for our developers, but there's visual inconsistency with the specs that's published from Adobe XD with the published version (font sizes, component/button heights are generally larger than how they appear in XD)

 

Since I've heard that a good rule of thumb for minimum font size is 16pt for web, I designed and published everything with 16 pt. It looks great on my computer, but as our developer is trying to recreate it, everything looks huge. Am I missing some exporting setting or am I supposed to always design at 100% view (while referring to my prototype at 100%?) I don't want to recreate everything in a smaller version.

 

Thanks!

 

 

Screen Shot 2019-12-30 at 5.16.59 PM.pngScreen Shot 2019-12-30 at 5.18.07 PM.png

Adobe Community Professional
Correct answer by Peter Villevoye | Adobe Community Professional

For the design stage, you just stick to those good old 72 dpi related points and pixels, for font sizes and element sizes – anything and everything. However, how this turns out for the technical implementation, is a matter of concern for the front-end developer. If he or she (or anything in between) isn't capable of translating these sizes to proper settings and specs in the HTML and CSS frameworks they're using, then it might be time to look for a more routined developer, in stead of adopting this task as a designer.

 

Something obvious like the (font) size seems like a very clear and almost trivial aspect, but it is in fact a very complicated and delicate matter. And to make it worse: systems and users can even impose their own settings or preference as an influencing factor. So you're often not very sure of the exact rendering size of anything. That's why you as a designer need to anticipate for some flexibility and a decent margin in all the sizing you apply. Your 16 pixels or point sizes may be a good starting point, but keep in mind that websites (and web-based apps as well) will always have a mind of their own...

 

Want to know more about the origines and reasons for this chaos ?

https://learnui.design/blog/ultimate-guide-font-sizes-ui-design.html

https://learnui.design/blog/font-size-principles-resources.html

TOPICS
Code, Desktop, How to, Import and export, Share

Views

592

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
Dec 30, 2019 0
Adobe Community Professional ,
Jan 04, 2020

Copy link to clipboard

Copied

Hi, sorry you are having problems with Adobe XD.  I'd like to know a few more details like:

  • Is it happening with a specific font?
  • The OS and XD version of your machine.

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...
Jan 04, 2020 0
Adobe Community Professional ,
Jan 06, 2020

Copy link to clipboard

Copied

For the design stage, you just stick to those good old 72 dpi related points and pixels, for font sizes and element sizes – anything and everything. However, how this turns out for the technical implementation, is a matter of concern for the front-end developer. If he or she (or anything in between) isn't capable of translating these sizes to proper settings and specs in the HTML and CSS frameworks they're using, then it might be time to look for a more routined developer, in stead of adopting this task as a designer.

 

Something obvious like the (font) size seems like a very clear and almost trivial aspect, but it is in fact a very complicated and delicate matter. And to make it worse: systems and users can even impose their own settings or preference as an influencing factor. So you're often not very sure of the exact rendering size of anything. That's why you as a designer need to anticipate for some flexibility and a decent margin in all the sizing you apply. Your 16 pixels or point sizes may be a good starting point, but keep in mind that websites (and web-based apps as well) will always have a mind of their own...

 

Want to know more about the origines and reasons for this chaos ?

https://learnui.design/blog/ultimate-guide-font-sizes-ui-design.html

https://learnui.design/blog/font-size-principles-resources.html

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...
Jan 06, 2020 0