Mockups includes a full screen presentation mode for presenting your wireframes to stakeholders or usability testing.
To enter Full Screen Presentation mode, just click on the full-screen icon in the top-right corner of Mockups, or select “Full Screen Presentation” from the View menu, or simply hit CTRL/CMD+F.
Balsamiq Mockups will expand to take up your whole screen, with your mockup centered on it.
The far left icon toggles the top bar on and off. You can turn it off to remove everything but the mockup (even the icon will disappear until the cursor is placed over it), this is useful for usability testing when you want a more realistic experience.
Navigating between Mockups
You can navigate between mockups using the icons in the upper left. They behave like the navigation icons in the editor toolbar. The up and down arrows navigate between your mockups in order, while the icon activated below allows you to jump directly to a specific mockup.
If you have created mockup alternates, a menu will appear when you mouse over the mockup, allowing you to select and display the alternates. If you are viewing an alternate, its name will appear in parentheses next to the offical mockup name.
If you have created links between your mockups, the links will be clickable in full screen presentation mode.
By default you will also see a big blue arrow pointer in place of the regular mouse cursor. This is useful for presenting your mockups. The pointer will point towards the center of the screen in order to always stay out of the way of your mockup as much as possible.
You can turn off the big blue arrow in the full screen settings by clicking the gear icon in the top right to open the settings panel.
The settings panel also has an option to turn on and off link hints. When link hints are on areas that contain links will be shown with a pink overlay so they can be seen easily.
The Markup setting is for showing and hiding markup elements, such as Sticky Notes, Arrows and Callouts (any control under the “Markup” tab in the UI Library). This is useful if you want to just look at your UI without the annotations that surround it.
The last setting is to set the view to zoom out to fit the largest mockup. All other mockups will be zoomed relative to the largest mockup.
There are keyboard shortcuts for each setting, shown next to the setting name in the panel. No modifier key is required in full screen mode (e.g., just L for link hints, not CTRL/CMD+L)
The info icon next to the settings icon will open a panel to view and edit notes for the selected mockup, just like in normal edit mode.
To exit Full Screen Presentation mode, hit the ESC key or click the icon in the upper right corner.
Adjusting Your Project’s Centering
Full Screen Presentation Mode centers your entire project based on the mockup that is the tallest, and the mockup that is the widest. While this normally results in a presentation that is centered (and whose focus doesn’t jump around), if you have a mockup that is a great deal larger than your other mockups, it may result in your project being off center, or pushed to the top of the screen.
In the Settings panel, you will find a link called Project Centering Rules.
Clicking that link will open a window that gives you an overview of the size of all the mockups in your project. It will show you the longest and widest mockups in project, and the effective size they are making your project as a whole. The longest mockup will have its width in red, while the tallest mockup will have it’s height in blue. This should give you a hint as to what mockup is causing your project to center incorrectly.
Clicking the checkbox next to the trouble mockup (or mockups) will take them out of the centering calculation (and will recalculate the new longest/widest mockups, adjusting the overall project size).
This should solve any centering issues you have!
Here is the feature in motion.