When viewing the prototypes, there needs to be a fill the screen view where the prototype fills the screen of the testing devices. See the mobile screenshots. The black areas represent unused screen space.

The solution to this actually don't have to be exactly scale to width, the most optimal way to solve it for me as a user (and think many would like this as well) would be to have the prototype adapt fully to the browser. A responsive prototype that, with the rules I specify (e.g. fix burger menu to top and left), present the prototype the way I intend it, independent to if it's an iPhone X, XR, 11 or an Samsung Galaxy S21 Ultra. We can very seldom control what device test participants use when they get access to prototypes or what device our stakeholders have in their hand. Why not go the whole way and fix prototyping the way I just described? (Of course I understand that it's complicated) but it would actually solve it in the best way possible. Then build on this solution and add breakpoints for mobile to desktop design. Then we'll be able to prototype with ease, get the right response from stakeholders, the more reliable data from user tests and so on.

But with that being said, I do agree that scale to width would be a solution in the meantime so I do agree with your post.

This would be extremely helpful -- I was planning to switch to Adobe XD for Figma in the hopes this feature would be available. It's one of my main frustrations with Figma sharing.

The lack of this feature is keeping InVision supported by our business. I would literally rather pay $25 a month to XD for this feature than have two separate programs for design and prototyping - especially as XD has some great animation features.

PLEASE PRIORITISE FOR OUR CLIENTS' SAKE!

I'm surprised how people aren't requesting this. Viewing the design but not being able to see it like it would actually be displayed. It's like being held in a cage under water, while viewing the sky.

They say "stay tuned". So, almost 2 years still waiting.

https://community.adobe.com/t5/adobe-xd/actual-size-prototype-in-preview-the-2018-edition/td-p/9718957?page=1

Hi I agree this is huge, it needs to be prioritised, when I show a client a design I have to tell them to CMD/CNTL- on the browser to make it fit which is so clunky.

To add they're also standard designs, a portrait 1080 touch screen for example, on a laptop you see about a quarter of it...

I'm very surprised there aren't many more people commenting on here. This is a big problem if you want to create prototypes to show to clients. Sadly, I guess it's time to start looking at other prototyping software.

Have designs fill the full browser window width and have standard scrolling functionality to give realistic prototypes

currently having to specify the viewport height constrains the designs to a box which looks odd and renders the fullscreen mode useless

This is currently done as standard by invision with no issues

When sharing on the web, it'd be nice if fullscreen mode ignored the viewport and just extended the full length of the viewer's browser. As it is, it's a bit funky.

Example: https://cl.ly/8152b5159922

Well it's weird because we have our artboard sized to 375x667px for mobile which is directly proportional for the iPhone 8 that I'm viewing on, but still getting white bars on either side when viewing in safari. Looks fine in the app. I'd rather see the full width but pushed down given the extra top and bottom bars inside the browser.

I suppose we should be accounting for this height in our design mockups, but it's hard to accomodate for all browsers. There's really no situation where the design would scale down to less than the width in the wild, so this seems like undesirable behavior to me.

Besides full screen it would be necessary to have a "fit artboard to screen", in prototype view. I am working on a tablet design 1280 high and I have to scroll in order to view the design. If I use browser zoom out, it seems to create some issues with navigation hotspots on the prototype and comment and artboard navigations become too small.

Hi All,

We have provided a fix for this issue recently in XD 12.0 release. Request you to give it a try, and access your prototype links on mobile devices again. You should now see the designs taking full width available, and let it overflow vertically if height is greater than available height of the device.

Do let us know if you are still seeing the same issue?

Thanks!

The workaround is no longer supported apparently, hence this request

This is vital to presentations. The program worked like this up until a couple months ago. Having an actual size should be secondary and not primary.

I found this workaround here: https://forums.adobe.com/thread/2458877 However, it does not work for chrome on mac, and therefor I cannot expect it to work on clients computers either.

This is very frustrating. The ability to see a clear picture of a website or app above the folder was the main reason I started using this app and this negates that ability.

Hi Arun,

Yes, me personally, I'd prefer the other option - to always fit the width first. Although I am sure there are designers that would rather see the whole design regardless of those white edges.

There is a way to accommodate both, but it becomes a bit more complex to code of course.

It's a 2 step solution.

1. When uploading prototype (or when setting up document?) ask if the designer wants to see the prototypes
- "rigid" - see the whole height (with possible white edges)
- "fluid" - fit width of the design first (let the rest fall beyond available viewable height)

Now when you have "fluid" prototype, there will be an issue with fixed elements near bottom of the page, they might fall beyond the viewable area, but we don't want that (example: a persistent CTA button at the bottom of the page would be half or completely hidden).

2. To accommodate for that, the designers will need an option to fix (anchor) elements either to the top of the page or to the bottom of the page.

3. And as a bonus to this approach, there could be an option to fix (anchor) elements to other elements. I saw this sort of request here on this forum somewhere and that would be super helpful too.

Hi Ondy,

What you mentioned here about mobile browsers having lesser vertical area available to display content is the main reason why this issue is happening.

We are trying to fit height of the design first, and then reduce width proportionally to maintain aspect ratio. This is why you see white gaps on left and right as the width has reduced slightly than its original size. This is the only way we can fit in the entire design within the available viewable area inside of the mobile browser.

The other option is to always fit to width of the design and then let there be vertical scrolling possible to view any content that would fall beyond the available viewable height in the browser. Do you think that would be acceptable behavior?

Hi Ondy,

Thanks for those information. We got a bug logged for this issue for further investigation.

Thanks,
Suhasini

Hi Suhasini,

I tested it on following devices with the same outcome (they all show white edges):

- Samsung Galaxy S7 - Chrome, Firefox, native Internet browser
- Samsung Galaxy S7 Edge - Chrome
- iPhone 6 - Safari

My artboard size is standard android size: 360x640

The issue with the "standard" size is that no regular browser lets you see the full 360x640. They all have permanent header, some have permanent footer. And also phones show their own header with notifications, battery and time information on top. All those make the actual prototype viewable area shorter (while keeping the same width).

As I mentioned before, I think the issue here is the addition of fixed elements, that are fixed to the whole exact size (640x360). Which needs to be shown in full to properly position elements near bottom of screen. Maybe better way to do this would be: instead just "Fixed Position" checkbox, have 2 checkboxes - "Fixed Position from the top" and "Fixed Position from the bottom". And let the prototype stretch to the sides. And have the fixed elements fall to their places based on the distance from top and/or bottom.

Hi Ondy,

Thanks for reporting this issue. I would require more information to investigate further :

- Which mobile device ?
- Which mobile browser ?
- Size of your artboard, is it standard size or custom size ?

Thanks,
Suhasini