An image is worth a thousand words and with our preview you can easily simulate, spec, and document your designs!
UXPin preview mode is brilliant when you’re about to present your design. Together with its commenting feature, it allows you and your entire team to iterate on the design smoothly.
To share your work with viewers, just click “Preview” at the top of the editor (or use CMD + SHIFT + P shortcut).
You can also use “Share” button which is placed right next to the preview button mentioned above:
Copy the link which appears in the modal window to share it with others, or simply send it via SMS, Slack or email:
In the sharing modal, you’ll be also able to decide if you want your stakeholders to have access to the Sitemap, Comments, Spec Mode, Documentation sections or Device Frame in the preview mode. Additionally, if “Automatically highlight interactions” option is selected, all the interactive fields in your design will be marked when you click the canvas.
Once you open the preview mode, your design will be shown in a nice clean interface:
Options & Sitemap
Now, let’s start from the top. In the left top corner, you can see a menu icon. Clicking on it allows you to go back to the prototype and dashboard as well as start live presentation. If you’re done for the day, you can also easily log out of UXPin.
Right next to it is our sitemap which you can quickly expand and hide if you want to get an overview of your prototype. It also indicates which page you’re currently on to help you keep track.
You can switch between pages using arrows ( ← or → ) on your keyboard!
A device frame provides better visual context for your prototype and gives it a “real-life” look.
In UXPin there is a wide range of frames for different devices presented in multiple color variants. A device frame is automatically matched with the chosen canvas size and you can select the color of the frame that suits you the most.
To make your prototype feel even more real a standard cursor is replaced with a touch cursor in the preview of touch-screen devices.
When it comes to sharing a preview link, it’s up to you to decide whether to show the device frame or hide it. This setting is available in the Share Menu of your prototype.
For presenting your prototype in the best light you can add a background color and a shadow in the preview.
To the right of the sitemap are our adaptive breakpoints. Using them makes it possible to switch your prototype to different device views. Now you can test them all in one place!
Auto set preview feature
Under the list of your breakpoints, you can find the auto-set feature enabled by default. This option helps you see how your design behaves when you hit certain resolution by manipulating with browser’s window.
Auto set will be available only if you prepared your design using more than one breakpoint.
Sometimes we need to get really close to make sure we’re not losing any crucial details or step away from the design to make sure we’re getting the whole picture. Right now our preview includes zoom, so you can easily take a look at your prototype both from the worm’s-eye and bird’s-eye views!
Just press on the zoom in (+) / zoom out (-) buttons or use gestures (pinch in/out) on your notebook to change the zoom settings.
Interactions & Full screen mode
Further to the right, you have a thunderbolt icon. Pressing it will temporarily highlight all the interactions located on that page, so you get the idea which parts of the design you have to interact with to trigger an action.
The last icon enables full screen. This mode will allow you to display the design without any additional panels, so you can focus on the work.
Switching between different modes
You definitely noticed that our preview now has different modes which help you focus only on the process you’re in right now.
- Is the prototyping at a very basic stage? Press Comment and leave your feedback or look through points left by the others! There are many options at your disposal, so get to know them better by reading this article.
- Do you want to go through the design without distractions? Simulate is there to help you.
- You’re a developer looking for more technical insight? Click on Spec and you can start exploring the design in detail. Make sure to check out this tutorial to learn more about this time-saving mode.
- Are you looking for more context on the used solutions? Documentation is there for just that reason – see what your colleagues had to say about that design. Click here to get to know everything about this feature.
That’s all you have to know about UXPin preview to smoothly collaborate with your entire project team and developers.
Learn more about sharing your design and start gathering feedback from your whole team, stakeholders — anyone with the preview link!