We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.
Hello people, I hope you can help me.
I don't know if any of you have happened to them, but every time I design a web in adobe xd, the measurements, by this I mean the text pixels and the image sizes that I put in the xd never remain the same as in A web program. An example: for adobe xd text I put 40 px, and when using the preview it looks good, but when I switch to programming and put the same thing, 40 px looks gigantic, and I have to reduce it to 32 or 30 px That is with everything, in adobe xd I always have the same problem, someone knows what it could be, because it makes it very difficult for me to design knowing that the measures I place are not going to be exact.
W are sorry to hear you are having trouble using XD. Would you mind sharing the OS & XD version of your machine? It would be really helpful if you can share a short video of the workflow for better understanding so that we can check at our end.
Could you describe how you're using and coding this "40 px" as a setting ?
Using pixels for type sizes can be very tricky, in all kinds of web and app designs and tools. There are debates about what a pixel actually is, related to the varying resolution of devices. And there are factors between your setting and the actual display, like browser and user preferences. So that's more than enough stuff to make any text size highly unpredictable.
That's why routined fron-end developers using all kinds of tools and tweaks to keep sizes consistent among devices, as far as possible.
I have the same problem for my projects and try to get a good work funnel between design en programming. Your answer doesn't really help.. sounds like just guess something but a simple question in the basics: why does a font of say 40px looks huge in html in comparison with 40px in XD. regardless of responsiveness. Something doesn't add up.
Hope to come to a good an understandeable conclusion.
Hi! What is the actual solution for this? I have the same problem and I am going nuts with it. How are the developers supposed to code my website if the prototype shows the text and other elements in px(and pt) and they seem gigantic compared to the prototype? What should I do? designing everything smaller so that the developers have a proper px/pt size in the development link?
I have even tried screenshoting a website in my browser, pasting it in an Adobe XD document, and the preview looks fine, but again, it looks much bigger when seeing it in the shared link and putting it at 100%