When I design using the desktop template 1024x1080 and I try to view it as a prototype, I never get 100% size. It is always smaller and “locked” to the 1080px height.
I want my design to be 1024px wide but in 100% and then I should be able to scroll since my arboard is higher than 1080px.
Hi Johan!
I’m sorry to hear that you’re having problems with viewing your Prototype at 100%!
My first thought is that this could be related to your display resolution as some resolutions, especially when taking into account the Menubar and Dock on the Mac, wouldn’t have enough vertical space to then display a Prototype with a height of 1080 and so would resize until it fits.
My first suggestion would be to try making the Prototyping player full screen (clicking the green circle in the top left corner of the window).
You can also adjust your Mac’s resolution by going to System Settings → Displays and trying one of the More Space
options there (when you mouse over them, they will show the effective resolution).
If you could see if either of those work for you then that would be great!
I have tried looking at different monitors with different resolutions and sizes of the screen. Maybe I dont understand how prototype works but I would like to show the prototype in 100% and the be able to scroll to see what is below the “fold” like a regular website. I also need to send this prototype to other people and it will be difficult if I need to give instructions on how to change their screen settings each time.
I will try to post a screenshot
Here you can see in the background my Sketch document in 100%.
And in the foreground the prototype through Chrome.
It is zoomed out and much smaller than my design.
Hi Johan,
Sorry, I think I misunderstood your original post but your followups clear that up!
I’m happy to tell you that what you would like to do is certainly possible in Sketch!
What you will need to do is to apply an Artboard Preset to this artboard.
Doing this will then make the artboard scrollable for you (and if you want, you can also pin items such as the top bar by selecting it and then under the Prototype tab in the Inspector, you can select the Fix position when scrolling
checkbox.
The reason you need to apply an artboard preset is that it determines what dimensions the Prototyping Player window should be.
So, what you will want to do is select that artboard, and then make sure it has a preset applied to it.
I’ve included a video below which I think should help clarify this for you but if you have any problems, do let me know!
Yes thank you. That was where I got stuck. I had a predefined preset that was 1080 in height.
I now created a new one with my desired height. Works great.
No problem at all - glad I could help!
Hi Keir, so this post was very helpful. However, when I view the prototype in the browser, the default is set to ‘fit to window’. I then have to manually go and change this to 'actual size so that I can get the experience of a 100% website with a scroll. Can I change this anywhere? Might be tricky having to explain this to a client. (‘Set default view to Actual size’)
Hi @Sandra_Staufer and welcome to the Sketch Forum!
Thanks for sharing this use case. Currently there’s no way to change this, the prototoype will always load with the Fit Canvas
option. The quickest way to get the Actual Size
option is to press Z
on your keyboard. But we’re aware that this is not ideal.
I’ve shared this use case with the team! If possible, would you mind sharing with us your email by contacting us at productsupport@sketch.com so we can let you know of any updates?
Thanks again and please share with us any other questions or feedback you have!