Screen Resolution Higher than design file resolution: How can i define scale to »full screen«?

[Abic77]

Hey!
i am working on my very first Adobe XD Projekt. I have been doing wordpress sites with templates before so i have a little experience but not too much in building from the scratch.
My project has a resolution in XD of 1440 with 1160 as a main container. I am going to set several breakpoints / resolutions for the smaller screens.

My question is: How can i control what happens on screens with higher resolutions? Is there something like setting some elements to »full screen« scaling? Of course this is possible in css but i am not sure what the best practice in XD is. I am not coding it myself so is it something one would tell the coding team (like »the image here should be 100% width«?

thank you!

Abic

[Rishabh_Tiwari]

Hi there,

Thanks for reaching out. Please refer to this article: https://medium.com/thinking-design/protip-exporting-assets-in-adobe-xd-c586996de703

Let us know if this helps or if you need any further assistance.

Regards

Rishabh

[Abic77]

Hey Rishabh,

thank you! ok i learned something but i am still not sure how the best practice for the coder would be. Where does he know from that lets say my header / hero image on the first screen should be scaled to 100% screen width while lets say the headline stays at its design width and height of my artboard?

thanks

[Spas K.]

The prototypes created with Xd are not dynamic. They are more or less static images, with interactions on top, but do not act the same way html/css does in a browser.

If you want to design for multiple devices, you need to make separate artboards for each breakpoint/resolution.

There is also no way to switch between devices in a prototype, so I personally make a separate prototype for each device. I first design for mobile, then I copy the artboards to another file and resize everything for tablets, and then for desktop, or whatever you need.

There is responsive resize, but it only works within Xd. It's a feature to make it easier resizing and adapting elements for the other screen sizes when you make them. You don't have that dynamic behavior in the actual prototype.

[Abic77]

Hello Spas

thank you! So you design an additional artboard with a very high resolution to show how things work on very large displays?

thank you

[Spas K. · Accepted solution]

Hi Abic, yes, that's correct.

You should look at the most common screen resolutions and design for those, or whatever the users of the website / app you think will use most of the time. In your case, since you have a fixed container for the content, whether the user is looking at it on a 1440 width screen, or on 1920, it will look the same. I usually go with 3 resolutions these days - 1920 (desktops), 720 (tablets) and 360 (phones).

A front-end developer will look at the different resolutions and figure out how to code the element's behavior. Often times an element will be full-width on the mobile device, but will be a card or a smaller element on a bigger screen. These things require media queries and more complex code, that can't be easily replicated with the way Xd and other design software works.

If you're showing the prototype to a client, it would be wise to make one prototype in the resolution they will be viewing it on, so they get the most realistic view on the design. Recently I had this problem that I sent a 1920 width prototype to a client, who viewed it on their laptop that was 1440, so everything looked smaller to them, when in reality it wasn't.