Author: Ben Gremillion

Topics in alphabetical order

Adaptive breakpoints

Advanced Animations

Commenting

Dashboard

Documentation, editing

Documentation, viewing

Editor, customizing panels

Editor, customizing UI

Editor, options bar

Editor, toolbar

Elements, groups

Elements, layers

Elements, searching

Elements

Export, plugins

Exports, plugins

Image browser

Import images

Interaction triggers

Interactions, common

Interactions, motion types

Interactions

Iterations

Layout grid

Multistate elements, creating

Multistate elements, editing

Multistate elements, interactions

Pages, linking

Previewing

Project folders, activity

Project folders, testing

Project folders

Projects, sharing

Prototypes, creating

Prototypes, exporting

Prototypes, sharing

Prototypes

Sitemap, hierarchy

Sitemap, page options

Sitemap

Spec mode, editing

Spec mode, viewing

Team members, adding

Team members, adding

Team members, managing

Team roles

Team-level features

Toolbar

Tour of the Interface

Get a free trial

Ask a question

Smart elements (SEs) are groups that change across an entire site when you edit the original. You can use these to save repetitive work by creating elements you’ll use everywhere in a given project.

In web dev terms this is analogous to a server-side include. In design terms this is a time-saver.

Consider website footers. When building with a multi-page website whose pages end with the same content, building one as a smart element keeps you from having to rebuild it each time — and change each copy every time the footer changes.

Creating smart elements

Building your own smart elements is straightforward: select one or more elements you want to use many places in your project, then right-click and select “Create Smart Element.” Alternatively you can type opt/alt-S, or click the “convert to Smart Element” icon in the upper right corner of the editor.

Once created, the smart element will appear in the Smart Elements panel on the left side of the editor. From here you can drag as many copies as necessary into your project.

Editing smart elements

Change one, change them all. This is the promise that smart elements bring, and doing so is easy: edit one instance, and the other instances of that smart element will follow suit.

Double-click any smart element to enter “edit” mode, indicated by a blue bar at the top of the editor. Make any changes you please, add or remove items, and tweak interactions within the SE. Then click “back to prototype” at the top of the editor, and you’re done. Every copy of the smart elements will change automatically.

You can also rename, edit and delete smart elements by hovering over their thumbnail to reveal more options.

Smart elements and interactions

Any item inside a smart element can contain interactions — as can the smart element itself. This is a great way to make slight variations in how copies of the same smart element behave. For example, you can use this to make a standard call to action whose link changes depending which page it’s on. Likewise, on a sales page with many products, the same “buy now” button can take users to different product detail pages.

To make an instance of a smart element interactive, click on it like you would any other element or group, then select “new interaction” from the right-hand panel.

Managing smart elements

Smart elements get their own panel on the left side of the editor. Open the “Libraries” panel to find it.

They’re organized into account elements (those available in every project) and project elements (only usable in the current prototype).

Like other elements, click and drag a smart element into your canvas to use it in your project.

Multistate Elements (MSEs) are sets of items, like boxes, buttons, and images, that change between configurations upon interaction.

Creating a MSE makes copies of the selected elements. You can move, resize, recolor, or otherwise change the copies per state. For example, two configurations — states — may each show a different icon. Clicking the element could flip between the states.

Creating MSEs

To create a MSE, select one or more items and add a new state in the right side of the editor.

By default, everything has a first state. It’s adding a second state that creates the MSE.

Editing MSEs

Upon creating a MSE, double-clicking it will enter “edit” mode. You know you’re there when you see a purple drop-down menu at the top of the Editor that lets you view different states.

It’s important to note that elements in different states are copies of the original items you selected for the MSE, which means you can edit their properties freely per state. When viewing a particular state, you can move elements within that state, change their styles like color and opacity, hide them altogether, or give them interactions. To leave “edit” mode, click outside of the MSE — either on another element or the canvas.

Interactions: Next, Previous & Set State

By themselves, MSEs don’t do anything. They need an interaction to make them change states. You have three actions available: Next, Previous and Set State. “Next” advances the currently visible state, much like advancing a slide in a presentation. When a MSE reaches the last state, and an interaction says “next,” then the MSE will show its first state. Thus a MSE with only two states will toggle between them with a “next” action.“Previous” does the opposite of Next, moving the MSE one step back through its states. “Set State” will let you specify which step the MSE will show.

For example, if a MSE have four states — say, “Favorite,” “Unfavorite,” “Default,” and “Disabled” — a button could have the MSE reveal the “Disabled” state, even if it was previously “Unfavorite.” Any trigger, like click (tap) or hover, can activate an action.

The difference between MSEs and simply showing or hiding elements with basic interactions is that MSEs can animate between states. Specifically, they can fade, spin, or slide from the top, left, right, or bottom.

Practical Examples

What are MSEs best at? Anything that requires sets of elements to change on demand.

• Toggling icons, as seen above
• Modal windows that appear or disappear
• Revealing more information about an item
• Showing groups, like optional form elements, on demand
• Image carousels
• Changing text in buttons on click or hover

Related resources

• Article: UX Best Practices: Designing the Overlooked Empty States
• Tutorial: Making Sortable Table Rows
• Tutorial: Don’t Settle for Default Radio Buttons
• Get a free trial

Ask a question

Static mockups are fine for presentations, but to really test a product you need interactions and links between higher-fidelity mockups.

UXPin lets you import Sketch and Photoshop files with free plugins for each app. Doing so lets you make prototypes that demonstrate not just how an app should work, but also how it should feel.

Getting the plugins

Look at the bottom left corner of the dashboard for a link to get the plugins, or under your profile icon in the upper right corner.

Double-clicking either plugin on a Mac will install it into the appropriate program.

On Windows, the plugin supports Photoshop CC 2014 and later. Once you unzip the downloaded file, copy the ‘UXPinExport’ folder into “Plug-ins/Generator/” in your Photoshop folder. Then restart Photoshop.

Using the plugins

Mac or Windows, when you open your design in Photoshop, the export option will be available under the “File > Generate” menu. In Sketch, look for “Export to UXPin” under the Plugins menu. Once you do, you’ll obtain a *.uxpin file which you can upload to any UXPin project folder.

You can then add interactions to any raster layer. At the time of this writing, text imported from Photoshop and Sketch are not editable, so plan accordingly.

Adding images

If you’d rather import assets into existing prototypes, then you can import files from your computer. Importing image files into UXPin is a matter of dragging and dropping the file from your computer to the canvas. Each image appears as its own layer, and you can import several at once.

UXPin supports JPGs, PNGs, GIFs (animated or not), and SVGs.

The image browser

UXPin remembers recent images you added to UXPin in any project, making them easy to access for all of your prototypes in a given project. Look in the left-hand panel for “Images” to see your recently imported files.

Importing from Sketch

The Sketch plugin lets you create projects from artboards that you can update later. Upon changing and re-exporting an artboard to UXPin, the changes will take effect. Except for elements you delete in Sketch, UXPin retains interactions imported from the popular illustration app.

After installing the plugin, select an artboard and go to Plugins > UXPin > Export selected artboards. From there you can choose a project folder and either add the artboard to an existing project, or create a new project.

Related resources

• Article: How to Use Sketch: 10 Shortcuts for UI Design
• Article: Top 10 Photoshop Shortcuts for UI Designers
• Download: Get 80 free handcrafted icons
• Get a free trial

Ask a question

Actions are the methods by which users interact with your prototype. That is, they do something when users click, swipe, or hover over them.

Basic interactions let you show, hide, move, and manipulate other elements on a page. They differ from advanced animations in that each action affects only one other element (or link) in one step. If you need a quick effect, basic interactions are the way to go.

Every interaction has at least three parts.

• Action: the change that occurs
• Element: which item on the canvas is acted upon
• Trigger: what the user does to kick off the interaction

A few others, like “set step,” “toggle,” and “move to”, have additional options like step, animation type, and distance, respectively.

From buttons to boxes to images to groups, you can make any element in UXPin interactive. And any element can have more than one interaction. For example, a button can change color on hover, and take users to another page on click. A few simple interactions can make most any element change basic properties to give the user more information, as when a button darkens on hover to indicate that it’s clickable.

Actions

When users trigger an interaction, an action affects one or more elements on the canvas. For example, on hover (the trigger), a button may turn brighter (a color action).

The actions are:

• Show, Hide, and Toggle
• Go to page and Go to URL
• Scroll to element
• Move to and move by
• Opacity and Color
• Size and Rotate
• Advanced animation
• Bring to front
• Send to back
• Set state
• Previous and Next state
• Disable and enable form elements
• Check and uncheck form elements
• Focus on a form field

Element

The element is an item that changes when actions are triggered. Although any element or group can take an action, different kinds of elements can accept different actions. For example, an interaction can change a box’s color, but not a group’s. By the same token, the “next state” action only affects multistate elements. Learn more about special element interactions.

Triggers

When the user interacts with an element, they cause an action to begin. These are standard interactions, like clicking or hovering, that are common to human/computer interfaces. The triggers in UXPin are:

• Click (tap)
• Double click (double tap)
• Right click
• Hover
• Mouse in and out
• Swipe up, down, left, and right
• Touch and hold
• Hold release
• On focus
• On blur

Common Actions

Simple interactions can make a big difference in how users react to interfaces. And there are plenty you can do with them. For example:

• Make a button change on hover to indicate that it’s clickable.
• Make a search box appear on demand.
• Send users to a real landing page when they fill out a simulated form.
• Make a modal window group appear when users click a login button.
• Take users to the top of a scrolling view on click.
• Reveal text information when users hover over an image thumbnail.
• Make a drop-down menu appear when users’ cursors enter a tab.
• Take users to a new page or view when they double-click an app icon.
• Hide unnecessary form fields is users click a certain radio button.

Related resources

• Article: Interaction Design Trends: 11 Microinteractions Deconstructed
• Article: An Introduction to Interactions With Material Design
• Tutorial: How to Make Expanding Buttons in UXPin
• Tutorial: Hide the Right Functions With Custom Drop-down Lists
• Ebook: The Practical Handbook to Rapid Lo-Fi Prototyping
• Get a free trial

Ask a question

Pages are individual designs that, when linked together, form a cohesive mockup. More than making distinct screens for sites and apps, you can use the sitemap to organize your work.

Managing pages in the sitemap

Pages can be created, nested, duplicated, and renamed in the Sitemap, a menu that contains a hierarchy of pages/views. You’ll find the Sitemap in the upper left corner of the editor.

To create a new page, click “new page” in the Sitemap. UXPin will immediately prompt you to give the page a name, then add the new page to the end of the Sitemap.

Page options: renaming, duplicating and deleting

Common functions appear when you hover over each page, turning it blue, in the Sitemap. You can rename a page by clicking its pencil icon, duplicate it by clicking the double-page icon, and permanently remove it by clicking the trashcan icon.

Build a hierarchy of nested pages

To keep your pages organized, you can drag and drop them into a hierarchy or logical structure for your reference. Push a page one level below another by dragging it into another page’s name. Remove a sub-page from its parent by dragging it out.

Hierarchies do not affect links between pages, so you can rearrange pages at any time for your reference.

Linking pages

Any element in UXPin can become a clickable link to other pages. To make one so, click an element, and add a new interaction — the “lightning bolt” tab in the right-hand panel. Links are the default interactive type. Next, choose a page, then click “add,” and you’re done.

Copy/paste between pages

If you need to transfer certain elements from one page to another, you can do the obvious: copy them from one source and paste them in another.

Select the elements you want to copy, type cmd-C (Mac) or ctrl-C (Windows). Then choose another page and type cmd-V (Mac) or ctrl-V (Windows) to create the copy.

Of course, you can also use symbols to re-purpose elements for consistency’s sake.

Adaptive breakpoints

To practice responsive web design, each page can have a series of breakpoints in which you can change the page’s layout for differently-sized devices.

Creating a new adaptive version will give each page its own new version — there’s no need to add, say, a wide website view for each page manually. And they’re not necessarily fixed. If you want to adjust a breakpoint after creating it, then edit “Canvas Properties” on the right when no elements are selected.

References

• Article: People Will Forge Their Own User Flows — and Design Should Follow Suit
• Get a free trial

Ask a question

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.

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.

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

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

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.

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.

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

• Article: Practical Collaboration: Tackling UX Feedback With Developers & Users
• Tutorial: Tips on Asking for Feedback in UXPin
• Tutorial: How to Use Prototypes to Inspire the Right Feedback
• Tutorial: How to Write Killer Copy That Improves Your Design Systems
• Ebook: The Guide to Prototyping Process & Fidelity
• Get a free trial

Ask a question