A blank canvas can be an intimidating place to start. Luckily, many tools, menus, and widgets accompany UXPin's canvas, turning you into an efficient design powerhouse.

The Editor is your tool to create wireframes, mockups, and prototypes. It includes tools, element libraries, and a working canvas upon which to construct great mockups.

Tour of the interface

The editor is organized into distinct areas: Toolbars, elements, canvas and breakpoints, and layers.

Layout of the editor

Customize the interface to your liking

Look under the View Options menu to customize your interface to better suit your workflow and screen space.

Editor view options

From here you can:

  • Reveal or hide the side bars
  • Make panels appear on demand
  • Switch between the interface's light and dark modes
  • Enable or disable element snapping
  • Enable or disable "smart" snapping between objects
  • Change the workbench (off-canvas area) color

"Advanced" mode lets you add code specifications per element (see below) and work with multistate elements; "simple" mode hides these features to de-clutter the interface.

Managing libraries

UXPin's hundreds of design elements are organized into "libraries." If you don't need every element in your work, you can control which elements are available to use and search for by clicking the "libraries" button on the right, then clicking "manage libraries" at the bottom of the library-select list.

Managing libraries

Type cmd-F (Mac) or ctrl-F (Windows) to call forth UXPin's search panel. Elements appear as soon as you type two or more letters. From there you can drag any element onto the canvas. Search remembers the last few elements you used, making them conveniently available for reuse.

Searching for elements

To choose an element for your work, drag it from the search results into your canvas.

The search feature looks for elements in your active element libraries (see the next section).

Editing elements

The right-hand panel is context-sensitive, meaning it changes depending on which element you've selected — if any. For example, choosing a box element will let you control its color, border, corner radius, typography, custom CSS, and more.

Box properties

Learn more about working with elements.

Specifications

Sometimes we want to reuse standard code snippets that make future updates easy. To keep everyone — including developers — from inventing non-standard code, you can assign code and comments to specific elements. To add "specifications," first make sure you're using the advanced editor view located in the bottom left corner of the editor. Then select an element and click the "i" tab on the right-hand panel. Choose code, then a language, and add your snippet to the field provided.

Adding spec code

Documentation

You can assign use-case notes to each element in a design with the Documentation feature. Click "Documentation" at the top of the Editor to enter commenting mode. Entering notes on the right, which support Markdown-like editing, produces a "target" icon. Click that icon, then an element, to assign the note. Numbered orange markers indicate which notes belong to which elements; a blue marker indicates the one you've selected.

Type shift-return to add a new line to the current note, or just a plain return to create a new note.

Adding documentation

Share with your team

You have many options to share your prototype and get direct feedback from your team. Anyone with the "collaborate" URL can test interactions and leave comments on your work, even if they don't have the live link.

Sharing button

Sharing options include the ability to share the prototype by email, SMS, Slack, and even QR code. Here you can also find the "export" options, which include saving as HTML/CSS/JS files, PDFs or a set of PNGs.

Sharing panel

Iterations

Iterations are "snapshots" or saved states of your project to which you can revert if you want to undo a series of changes after closing your browser tab. Each iteration has a unique live preview URL and its own set of comments, letting you start anew as you respond to team feedback.

To create an iteration or view old ones, look for "Iterations" in the "more actions" menu (lower right corner of the Editor). Each iteration has several options: you can preview it to see its comments, for example, or "roll back" to that version to continue your work.

Viewing live

Creating interactions the first step; testing them is the second. You can test your mockups and prototypes live when you press the "preview" button at the top center of the Editor's toolbar.

Preview button

This presents your work in a new tab, simulating a real website or app.

Related resources

  • Tutorial: How to Make Expanding Buttons in UXPin
  • Tutorial: How to Make a Select List Interactive in UXPin
  • Tutorial: Hide the Right Functions With Custom Drop-down Lists
  • Ebook: The Guide to Interactive Wireframing
  • Article: Beware Sloppy Shortcuts — Use Design Systems to Keep Code on Track
  • Get a free trial

Ask a question

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

Get tips on hiring, onboarding, and structuring a design team with insights from DesignOps leaders.

Download ebook for free

Improve your design operations – download our DesignOps 101 ebook and learn all about it. Read insights of top design leaders from IBM, Salesforce, Delivery Hero, and more!

Download ebook for free