Adobe XD Prototype Fit Size vs 100%, Design vs Developer Code confusion

[rform82]

Hi there,

I'm fairly new to Adobe XD but am trying to understand something that has happened. Please bear with me as I try to explain what I'm trying to figure out. I'm just trying to work out what has happened and what I need to differently in the future, but I'm not sure exactly what went wrong and where.

I designed a website layout at 1920px wide. When I view that in my browser, it displays at let's say 67.4%. My understanding (which may be wrong) is that to show my design at 100% in my browser, it displays as 67.4% in my browser. I assume this is because my browser is not 1920 px wide, but 3456px x 2234px. So, it shows what the design at 100% looks like in my browser and the fact that my design layout does not fit my screen perfectly.

I provided a development link to our developers and was asked if I wanted my design created at 100%. Assuming they were referencing my design file, I said yes of course. When I received the first glimpse of the site in development, everything was much larger and looked as though the browser had been zoomed in.

The developers were referring to the zoom dropdown in the XD browser walkthrough when they asked if I wanted it at 100%, which I didn't understand. So, they changed their browser view to 100%. My understanding is that by changing that dropdown to 100%, it forces the design to fill the entire browser screen size, and dependng on that could look too wide/large like it does when I try this.

While debating back and forth where things went wrong, they mentioned they did follow the measurements, etc. available in developer tools. I started observing these at the view I was always looking at in FIT (in my case - 67.4%) versus at 100% in the browser.

What I have observed is that at 100% in the browser, the measurements do match when I screenshot and do a check. However, at 100% in the browser is not what I expected the design to look like. I expected it to be 100% of the design layout, developed in a responsive manner that adjusts as needed in order to display properly depending on browser size, break points, etc.

If I view the site in browser at my default FIT size (67.4%), it looks just like how the design was intended at least as a guide for how I assumed it would be developed. When I view the measurements however wiht developer tools, I am noticing that spacing between elements, etc. are all still the same as when the view is 100%. In my XD file, those measurements are not the same.

Here is where I am stumped... I want to understand where I went wrong. I am learning, so please don't be too hard on me! I tell the developer that things are way too big and I am told they match the measurements in Developer tools. And, I understand that they do. But what I don't understand is what I needed to do differently to avoid this situation. Currently, I do not know how to explain it in a way that will help and I assume that the developer is right in how they built it based on using developer tools, but things are so off compared to my XD file that I don't know how to avoid this same situation in the future.

Thanks in advance for any guidance. I would really appreciate it.

[AkinGn · Accepted solution]

Hi @rform82, hmm, first question I'd like to ask to you would be whether you checked your design in 100% scale while your designing on XD, because while I design, I don't do it in 100% zoom all the time since I'd like to move quickly on the canvas/artboard, so I move on to places, and zoom in /zoom out to design in more detail and quickly navigate on the design as I said, and for zoom actions I usually use ctrl/cmd-1 shortcut to view my design in 100% on XD. So I wanted to try once more after reading your question and would like to share a test file: https://www.dropbox.com/s/32g9osfmuetgaeg/w1920-test.xd?dl=0 
You can check the preview/prototype (although it's a simple file just with some elements without any interactions) shared for development here: https://xd.adobe.com/view/b5959932-857a-4777-b80c-c44ba5f6a830-e0c6/

What I did was, I measured the space between the buttons first on XD, and then compared the space between buttons in the prototype link, they were the same (I did that also for little squres I created with repeat grid) And I used the chrome addon "Dimensions" to measure spaces on prototype link: https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj?hl=en 

As long as the prototype link's zoom is 100%, the spacing/sizing is the same with the ones in the XD file. Also under the "View Specs" (or code/CSS specs view, second button from the top at the right sidebar with the code symbol "</>") on the prototype link, all the sizes/values/properties are the same with the XD file, regardless of the zoom level on the browser. Hope this helps, feel free to update me if you find out anything else.

[rform82]

Thanks @AKin I am looking at your reply now 🙂

[rform82]

Thanks @AkinGn I am looking at your reply now 🙂