Skip to main content
jose luisc18080384
jose luisc18080384
Participant
December 30, 2019
Answered

PROBLEM WITH ADOBE XD SIZE

  • December 30, 2019
  • 3 replies
  • 2411 views

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.

This topic has been closed for replies.
Correct answer Peter Villevoye

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. 

3 replies

elvencat11
elvencat11
Participating Frequently
November 12, 2020

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%

    S
    Samed28037832l12u
    Participant
    January 20, 2023

    I have the same problem, did you fix it

    elvencat11
    elvencat11
    Participating Frequently
    August 21, 2023

    I'm afraid I ended up designing everything 20% smaller than it should be, it worked but it's a shoddy workaround 😕😕

    Peter Villevoye
    Community Expert
    Peter VillevoyeCommunity ExpertCorrect answer
    Community Expert
    December 30, 2019

    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. 

      nielsf27930324
      nielsf27930324
      Participant
      August 12, 2021

      Hello.

       

      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.

        HARSHIKA_VERMA
        Community Manager
        HARSHIKA_VERMACommunity Manager
        Community Manager
        December 30, 2019

        Hi Jose,

         

        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.

         

        Thanks,

        Harshika

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices