Participant

Answered

Is Adobe XD "play preview" 100% scale?

Forum|Forum|7 years ago
June 23, 2018
11 replies
62091 views

Hi All,

I'm new to Adobe XD and currently getting an understanding of it by creating a website prototype—I am generally clicking the "Desktop preview" Play button at the top right-hand corner to see how its looking, however, when I publish and view the link in a browser (Enlarging it with the full-screen arrows) it seems to be a lot more zoomed in then the desktop preview.

So my question is which one is the actual size? The desktop preview or the published version? Just checking so I can understand the final fonts sizes and layout etc.

Thanks!

Aaron

[Here is the list of all Adobe forums... https://forums.adobe.com/welcome]

[Comments is to ask about the operation of the Forum, not a specific program]

[Moved from the Comments forum to the specific Program forum... Mod]

Correct answer Peter Villevoye

No of course not, because it's too damn difficult to take all the variables into account which might influence whatever text size those dreaded users eventually see on their screens. Your designs should be intended to give your valued client and routined front-end developer a fairly good idea what you're striving for. But the end result is always a mix of system and browser inconsistencies, and user preferences. So keep margins in mind while desiging and don't expect pixel perfect executions of your designs.

B

Byrd 001

Participant

Quick FIX:
1. To programmer develop what the design and client preview, take a print screen of what client and designers preview, ignore all CSS sizes generated and all Images sizes in export and recalculate everything my friend.
or
2. With your team, change the Viewport Height at the Atboard settings, to less then 1080, this will preview at 100% to designer. But not a good preview for an presentation for an client.

___________________________________________________________________________________________

Adobe: The preview its not consideranting the windows/mac bars, so no one had 1080 free space of height, then the layout is scalling to fix the 1080 pixels setting in Artboard.

The problem: No one knows that, its causing a lot of confusion and rework,

Solution: Hope had an option, easy to access, to preview at 100% but not trying to fit.
Maybe generating with scroll, but in 100%, something like that.

M

matta59346839

Participant

Just adding this for anyone else who have also found themselves here after googling for a solution.

Drag the viewport guide (the blue horizontal guide) to the very bottom of the artboard. Not sure why, but that allows the preview to be viewed at actual, proper 100% scale.

Kaio AC

Participant

After some time testing, i cold solve this problem changing de height of de screen at XD arboart menu. Example: if you are using 1920 display on windowns use 970px in height...seems adobe XD respect the real size of your artboard so you dont see your design complete, because we have bars menus on OS and Browsers.

Peter Villevoye

Community Expert

I think I know what might be happening here, causing some (or perhaps a lot) confusion.

Like @platypusman correctly stated (once again), the viewport setting is of course crucial in defining the initial view in the Preview. If the width of the artboard and/or the height of the viewport isn't larger than your monitor's (perceived) resolution, then the preview will be okay, unscaled, matching your 100% design. This is what's happening normally. Some users might be wishing for other initial behaviors or an option to change the behavior while viewing, which is not too crazy or wouldn't be too difficult to develop. But with only 58 users voting for this UserVoice request in 5 years, I think the current incarnation of the Preview isn't that bad.

But one of the UserVoice comments (Rishi's) made me go "ahhh..." as I read his tip, back in 2019:

2. Add Vertical Scrolling to your artboard.

That's it ! For all preset artboards the default Scrolling setting is Vertical. (Custom artboards don't.) As I switch it to None, the Preview immediately and correctly shows the whole artboard in the (live) Preview. There's your "Fit" Preview option or even preference, in a make-shift way though. But as I switch Scrolling back to Vertical again, I notice that the Viewport height is left at the momentary height of the artboard. It doesn't change back to any previous or preset setting. So if the artboard has ended up just a bit too high for your screen, the design keeps scaling to fit the Preview window, with black borders and all...

So I guess that might be a behavior which is causing some unexpected and conflicting results.

Fortunately, it's easy to tackle. Just set the Viewport height back to an obvious or feasable height.

The only use cases in which scaling options in the Preview would be useful, is when you're designing with exact pixel precision in mind for double or Retina resolutions (like one of the voters does), or when you want to accommodate your screen to –how appropriate– a Zoom session (like another voter does). But then again, I could come up with a dozen more challenging circumstances (and solutions) for Adobe XD to anticipate.

laiscolombo

Participant

Hey Peter, hello everyone.

I haven't read all your comments but I am experiencing the same issues as everybody else...

I think the sad thing is that at least here in Brazil, with the clients I have to deal with, it's hard to explain to them that the software I'm using will only go as far as showing a kind of real life representation of their website. I always have to start meetings explaining this to them before showing the prototype, and it feels like I'm not being professional with the project because I choose to use XD. I love XD, but I have considered changing to Figma, I've been told they don't have those kind of issues, which makes it harder to understand why Adobe still has them. Anyway, I'm glad I'm not alone at this! Thank you for all your insights.

Michael Dunlap

Participating Frequently

InVision lets you stretch the background so that the screen width adjusts regardless of the monitor size. This is similar to a repeat pattern in HTML. I'd love to see this in XD.

platypusman

Participating Frequently

Consider voting for this feature request on Adobe XD UserVoice, which is from 2016 and has 58 votes:

Zoom in the Preview Window

https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/16313950-zoom-in-the-preview-window

Also note that the "Viewport height" setting will determine the scale of your preview. Make sure to set that to a value slightly smaller than the height of your screen - otherwise XD will shrink your design and you'll have black bars on the sides. (I don't like or understand this, but that seems to be how it works.)

Suggestion to Adobe: ignore the viewport height, and just render the design based on the artboard width. Or make this a setting/option. In either case, this needs to be more obvious because lots of people on lots of forums are, like myself, confused by the size at which the preview is getting rendered.

O

Olivia5C39

Participant

Hi

I tried to follow the thread and I really apprecite the discussion. When I'm writing this in October 2020, it seems to work for me with Adobe XD web previewer in Chrome.

I have done a mockup with artboards that are 1920, but using only 1328 px in the center and a viewport height of 700. This to design for a screen size of 1366x768 and 1920x1080 at the same time. When I preview my design on 1366x768 screen (I lowered the resolution from 1920x1080), with a Chrome icognito window on Win 10, I get this screen

As you see, I can change the zoom, in the upper right corner. The default zoom became 50.9 %. I can change the zoom to 100 %.

The thing I miss here, is a way to scroll left and right, both in fullscreen and not in fullscreen with the Adobe XD web previewer (The two diagnoal arrow button, to the right of the zoom). Just note that are two fullscreens, one in the Adobe XD web previewer and Chromes itself (F11).

When I use 100 % and Adobe web previewer full screen, I get this

where you see that the left side is cut. So I guessed, the Adobe XD web previewer, tries to center it. But I would like to be able to scroll a bit to the left.

charlesh24601004

Participant

Is this fixed yet?

I need to view my text at the size it was designed.

I designed my artboard at 1680 wide to match the width of my 2019 15" MacBook Pro. When I preview my file I still get bars. I check the browser width and its 1680, I check the zoom and its 100%.

Peter Villevoye

Correct answer

Community Expert

No of course not, because it's too damn difficult to take all the variables into account which might influence whatever text size those dreaded users eventually see on their screens. Your designs should be intended to give your valued client and routined front-end developer a fairly good idea what you're striving for. But the end result is always a mix of system and browser inconsistencies, and user preferences. So keep margins in mind while desiging and don't expect pixel perfect executions of your designs.

R

ranieri_p

Participating Frequently

Hi Peter,

My knowledge in development is brief and very superficial, you say it is very difficult so I believe. But, you already do incredibly complex things at Adobe and would this problem be very difficult? Attached is the print of Marvel's export configuration, with this feature the prototype ignores the screen size and displays the prototype in its actual size, as it was designed.

This problem creates two other problems, one for me and my client. The first, I need to export the screen in PNG and view it in the browser to analyze its consistency and actual size in action. The second problem is when presenting to my client, for him to view the prototype in real size I must request that it enables F11 and be on a screen compatible with the resolution from which I projected. In such a complete program it is somewhat frustrating to see that something so crucial is missing.

W

Wiggum

Participant

Hey Adobe - why?? Why scale to fit available space? What are you thinking? Prototypes are built, mostly, to a specific size. It's paramount that this size carries forward to any client presentation. I really don't understand your logic here

H

Hakan Salih

Participant

Problem Solution - YouTube

R

ranieri_p

Participating Frequently

It's not a solution, it's a quick fix kkkkkkk

S

stuart__k

Adobe Employee

The published version in fullscreen is the size that you are designing at. On desktop in the preview window we scale the prototype to fit the available space.

It's probably easiest to check in XD by changing the zoom to 100% (Cmd/Ctrl + 1) and looking at the size.