Post Image

Previewing and Collaborating

Ben Gremillion
By Ben Gremillion on 1st July, 2016 Updated on 26th October, 2020

Building 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.

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.

Switch from the editor to preview by clicking the appropriate button at the top of the editor. You’ll get a new tab that lets you access comments, interactions, documentation, and spec mode.

Where the preview button is

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 “documentation” indicates that it does, in fact, have notes to read.

Preview top bar diagram

“Other options” includes:

  • Return to the editor (if you have permission)
  • Return to your dashboard
  • Start a live presentation
  • Log out

Commenting

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.

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.

Adding a comment

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.

Viewing specifications

Spec mode lets you get specific information about elements in your design. Redlining 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, reveals a “specification” tab on the right. Click that tab to see its ideal code in HTML, CSS, JavaScript, or other programming language. Spec mode doesn’t write code on your behalf, enabling you to keep your own codebase and writing style intact.

Viewing spec mode

Viewing documentation

Documentation allows you to share best use case information per element with your team. To see elements’ notes, click “documentation” 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.

Documentation supports Markdown-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.

Viewing documentation

Sharing

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.

Where to find the share icon

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.

The sharing panel has several different ways that you can share your prototype

Exporting

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.

Related resources

Ask a question







Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you