Adjust the preview window to the size of the artboard viewed
A simple example. We create 4 different artboards. (1200px, 992px, 768px, 576px)
2. Connect in prototype mode from left to right.
3. We check in preview mode.
Now when we click anywhere, our artboards will change from the largest to the smallest.
It can be seen that after each change, the Preview window keeps the beginner value. In this case 1200px.
I would like it to automatically adjust the size of the preview window to the width of the artboard.
This will be a very good solution for a better view of responsiveness.
You can do it in two ways.
Download the value of the current system's resolution and consider it as a "fullscreen window size". And then the function will not automatically fine-tune the window.
Otherwise, if the window does not have the "fullscreen" value, the preview function will automatically scale the artboard window.
Or expand the current solution with automatic scaling of the preview window. Before the earlier setting, what type we want to display automatic scaling or not.
Keita Jones commented
When previewing my prototype in XD, I notice that if other artboards have different viewport sizes from the first artboard, they won't match. Meaning all the other artboards will be viewed in different screen sizes in the preview window. I understand that you can change all the viewports to the same number and it will view properly, but why? Why can't different artboards have different viewports and still be viewed at full screen size?
Adson Cicilioti commented
Bad behavior! Bug! Need fix!
Milana Stanic commented
This actually works if the viewport is proper, so scrolling none is checked. When changing the orientation of the artboard by default a viewport will be added if a bigger element is hidden by the change. Hope it helps someone.
Amalie Reimer commented
I am sitting right now with the problem that i have to show my product portrait and landscape... and because it is not possible to rotate i gotta make two versions...
Thomas Hallgren commented
The Responsive-design feature (if it ever happens) will tie into this.
Matthijs Clasener commented
YES! That's very important. Would love that feature. Making a portrait and a landscape version in one XD file. Preview it. And the preview understands if Portrait or Landscape is needed.
Even on 90% portrait apps we sometimes need to show some landscape rotation scree (i.e. video feeds or photo galleries).
Since XD allows landscape and portrait artboards in the same project, please have the preview rotatable, too. This would be for all: Preview window, browser and on an actual device.
With iOS and universal storyboards, I need to show my devs both orientations. This would be nice to have in one prototype that reacts to the device orientation. Similar to Photoshop's Device Preview.
Side note: please build a stand-alone app for previewing prototypes. (i.e. Marvelapp)
Josh Curtis commented
@Peter Yes, previewing within Adobe XD. However, being able to rotate within the browser as well would be amazing. Our phone app is 95% portrait experience, but our tablet app does rotate 100% in portrait and landscape. Sometimes stakeholders want to view a screen in both orientations, so it can be helpful.
Just to be clear -- are you using the Preview window within Adobe XD, or are you viewing a shared prototype in your browser on a real physical mobile device?
Josh Curtis commented
As a user, I want to be able to switch preview screen orientation (e.g., portrait to landscape) so that The preview looks like I've physically rotated the device.
We have a portrait browsing experience. Users can click and watch a video in landscape mode. When trying to go back to portrait view, there seems to be some kind odd struggle in the preview window. It's not the same scale between the rotations.