16 Replies Latest reply on Mar 12, 2018 2:05 PM by Dandelionapps

    'Actual size' prototype in preview?

    Thom Hayes Level 1



      So showing desktop website/app workflows at the moment is a little tricky for me, and XD had a solution.

      This is not it's intended use I know, but I've dropped a bunch of jpegs at a size that would be full screen on my monitor, taking into account the usual browser gumph at the top etc. Then ive dropped a bunch of transparent boxes over the interractive elements so I can link them all up in prototype mode.


      It all works a treat, however the preview squashes the whole thing down into a smaller window? Is there no 'full screen' or 'actual size' option for people making desktop apps?

      Currently there is no way I can show these previews to the client, as they want to see it at its intended size.



        • 1. Re: 'Actual size' prototype in preview?
          Vic Mitnick - Adobe Adobe Employee

          Did you just drop the image into a blank XD canvas, or did you create an artboard first?
          I think if you start with a new document in XD, and place an artboard with the dimensions of your full monitor, it should work as you expect (or at least much closer than what you're seeing now.)


          - Vic

          • 2. Re: 'Actual size' prototype in preview?
            Thom Hayes Level 1

            Hi Vic


            Thanks for the reply, really appreciate it.

            Yes the document has been set up properly with each artboard being the right dimensions.


            I think the issue is that the preview window has a border around it with all of the XD credentials etc in it. Which is obviously fine, but then there should be a 'full screen' option for those building larger apps?

            1 person found this helpful
            • 3. Re: 'Actual size' prototype in preview?
              Corrinna Rainwater Adobe Employee

              Hi Thom,


              you are right, currently most prototypes are scaled and do not show at 100%. We have a backlog story for this feature and it will be available in the future.


              HTH, Corrinna

              1 person found this helpful
              • 4. Re: 'Actual size' prototype in preview?
                Thom Hayes Level 1

                Hi Corrinna


                Thanks for getting in touch. At least i know now I'm not going mad!

                It does seem a little odd the way they work; it seems when I upload the files to use through the link, the art boards are actually scaled up something like 150% before they are then squished down into the preview window, which seems a little bizarre.


                With a little faffing about with the CSS in chrome I can get it to display correctly, but of course as I click through it jumps back to your smaller version. But it seems like something that would be a very quick fix.


                At the moment its meaning the difference between using XD for client work, and not.

                Thanks again for your time



                • 5. Re: 'Actual size' prototype in preview?
                  Thom Hayes Level 1

                  This issue is now resolved - it wasn't mentioend in the release notes to the recent update, but there is now a full screen button in the top right of the preview window.



                  Many thanks Adobe team

                  • 6. Re: 'Actual size' prototype in preview?

                    This button doesn't solve the "actual size" problem at all. Adobe?

                    • 7. Re: 'Actual size' prototype in preview?
                      Thom Hayes Level 1

                      Ah - I've made my artboards the same size as my screen, so full screen is currently 'actual size' for me. But yeah by the looks of it, this would just continue to stretch larger on a higher res screen? Need it to not go beyond 100%.


                      Noticed something weird that I mentioned earlier - looks like the artboards are scaled roughly 150% in the previews, and then shrunk down again to fit the screen. Pretty odd

                      • 8. Re: 'Actual size' prototype in preview?
                        Vic Mitnick - Adobe Adobe Employee

                        First, we're talking about how the prototype looks when sharing on the web, not via the Preview screen inside of XD, right?


                        For the web sharing view, my experiments show that if you make your browser full screen and also click the "fullscreen mode" icon in the top right corner of the page, your artboard _will_ appear at its actual size (assuming the artboard is not larger than your screen, of course.)


                        I tried it with a artboards the same dimensions of my monitor, and in a different document, with artboards smaller than my monitor. In both cases, the artboards were displayed at their specified sizes.


                        Is this different than what you're seeing, Thom & Etienne?


                        - Vic

                        • 9. Re: 'Actual size' prototype in preview?
                          Thom Hayes Level 1

                          Hi Vic


                          I can't say for sure without experimenting some more - but right now, for me, this fix means I can now use XD to show correct sized prototypes to clients, so I'm all good. I can't say what it would do with a larger artboard, but I can't personally see myself needing that!

                          • 10. Re: 'Actual size' prototype in preview?
                            Corrinna Rainwater Adobe Employee

                            Hi Thom,


                            You might have run into a bug that was life for a short time. We caught it and fixed it already. If you created artboards via the artboard tool and not with presets then they rendered bigger than 100%.


                            Could you please try again with your design file and let me know if you still see this behavior, I am happy to look into this. Expected behavior is as Vic states that the artboards never scale more than 100%.


                            Thanks, Corrinna

                            1 person found this helpful
                            • 11. Re: 'Actual size' prototype in preview?
                              Thom Hayes Level 1

                              Good to know! Thanks Corrinna

                              • 12. Re: 'Actual size' prototype in preview?
                                dwabyick1 Adobe Employee

                                One other feature that is coming soon is 'Long Artboard' scrolling.  It allows, to a limited degree, creating an artboard that is taller than its viewport height, so only its width will be sized to the screen.  Hopefully this helps with these types of scenarios.




                                2 people found this helpful
                                • 13. Re: 'Actual size' prototype in preview?
                                  ashtonbrown Level 1

                                  Has this 'Long Artboard' scrolling feature been released yet? I design mockups of the full page that will require scrolling in the web preview to see the entire page. Currently when viewing the mockup on the web view it still scales it to fit the screen making everything so small and text unreadable.


                                  Is it possible to set the web prototype view to display the mock up at 100% are require scrolling yet?

                                  • 14. Re: 'Actual size' prototype in preview?
                                    ashtonbrown Level 1

                                    I found the answer.

                                    Click the viewport name, then under Scrolling choose vertical and set to something like 1024. Then the prototype displays at 100%/Actual Size and allows the viewer to scroll up and down the page.

                                    1 person found this helpful
                                    • 15. Re: 'Actual size' prototype in preview?



                                      Could you make the preview window behave like the one in photoshop?  


                                      I am using a software / app combination called spacedesk to make my phone act like an external monitor as you can see on the picture (screen 3).


                                      Then In Photoshop one can click WINDOW > ARRANGE > NEW WINDOW for the current file.


                                      then I can drag it over to my phone and press F fo have it fullscreen without any interface elements.


                                      another cool option for that window would be to have a shortcut  to switch to  x2, x3, /2, /3
                                      to make the current artboard resolution scale to  x2 or /2 if it does not fit to my current resolution of the external screen. Sure I also can go through the exported png files on my third screen but a live view would be more efficient

                                      • 16. Re: 'Actual size' prototype in preview?

                                        Hey! this is the best option ever! I'm working on a 13" MacBook Pro and I change the viewport to 600 and it's PERFECT now