![\"Where](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Where-is-preview.png\")
<\/p>\nBuilding prototypes is one thing. Refining them is another. Feedback is essential to turning good ideas into great products, and UXPin offers several ways to collect input from your team.<\/p>\n
Preview mode lets you — or anyone — test your prototype and its interactions, including links between pages or views. They can also leave comments on specific points of the design, reply to comments, and mark them as completed tasks.<\/p>\n
Switch from the editor to preview by clicking the appropriate button at the top of the editor. You\u2019ll get a new tab that lets you access comments, interactions, documentation, and spec mode.<\/p>\n
<\/p>\n
Many options fill the top-most bar, including the ability to switch between breakpoints; zoom in and out; reveal elements with interactions; and switch between the various preview modes (comment, simulate, spec, and documentation). An orange dot next to \u201cdocumentation\u201d indicates that it does, in fact, have notes to read.<\/p>\n
![\"Preview](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Preview-top-bar-diagram-1.png\")
<\/p>\n
\u201cOther options\u201d includes:<\/p>\n
Anyone with the URL to a prototype’s live preview can add comments — even if they don’t have a UXPin account. That makes preview mode ideal for working with stakeholders who don’t need to design themselves, like outside clients.<\/p>\n
To add comments, click to comment mode at the top of the preview window. The prototype will gain a pulsing grey border. Next, click anywhere in the canvas to add a comment at that point. You can choose to notify people assigned to the prototype, assign them to people as a to-do item, or simply leave a note for your team to review at their leisure. Deadlines permitting, of course.<\/p>\n
![\"Adding](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Adding-a-comment.gif\")
<\/p>\n
Red (public) or purple (team only) dots denote comments that you can click to view. Clicking one not only reveals the comment, but also the option to mark it as completed.<\/p>\n
Spec mode<\/em> lets you get specific information about elements in your design. Redlining<\/em> shows you the space between disparate elements, as well as the canvas, as you hover over them. You can also click on elements to get distances between them and their neighbors. Clicking on elements with attached code snippets, which designers can add in the editor<\/a>, reveals a \u201cspecification\u201d tab on the right. Click that tab to see its ideal code in HTML, CSS, JavaScript, or other programming language. Spec mode doesn\u2019t write code on your behalf, enabling you to keep your own codebase and writing style intact.<\/p>\n Documentation allows you to share best use case information per element with your team. To see elements\u2019 notes, click \u201cdocumentation\u201d at the top of the preview window. Selecting an orange dot in the right column will indicate to which element it refers by turning blue. On the other hand, clicking an element in the canvas will indicate to which comment it refers.<\/p>\n Documentation supports Markdown<\/a>-like note. You can create headers, or make text bold or italic, by highlighting it to reveal the options. Type shift-return to add a new line within the same comment; type return by itself to create a new note.<\/p>\n At the top right of the editor you’ll find the Share icon. This button brings up the appropriately-named Sharing panel which, as you might expect, provides different ways to send the prototype to your team for review.<\/p>\n The Sharing panel gives you the project’s live URL to copy into your medium of choice, like Slack or other instant message service. You can also email the URL to anyone or, in the case of testing mobile app prototypes, send the URL as a SMS code. Anyone with the URL can view and interact with the prototype, even if they don’t have a UXPin account.<\/p>\n The Sharing panel includes an Export tab that lets you save a prototype for offline viewing as interactive HTML, a PDF, or a series of PNGs.<\/p>\n![\"Viewing](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Spec-mode-view.gif\")
<\/p>\nViewing documentation<\/h2>\n
![\"Viewing](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Viewing-documentation-mode.gif\")
<\/p>\nSharing<\/h2>\n
![\"Where](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/07\/Where-is-the-share-icon.png\"){kind=icon}
<\/p>\n![\"The](\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/image02-611x300.png\")
<\/p>\nExporting<\/h2>\n
Related resources<\/h2>\n
\n
Ask a question<\/h2>\n