Post Image

Working with Elements

by
Ben Gremillion
Ben Gremillion

The Editor lets you build prototypes with elements, from simple shapes to icons to pre-built components. Here’s how to find and organize elements in your design.

Everything is a layer

As in Illustrator or Sketch, every element is a unique “layer,” or object. That means you can place elements above or below other elements, like navigation buttons above a background. To see your layers, click the stack-like icon near the bottom left corner of the editor.

Where are layers?

The layers menu is detachable so you can move it to a convenient place above the canvas as you work, if you need the space. Look for the three-bar “pop out” icon in the upper right corner of the layers menu itself.

Detaching layers

Adding elements to the canvas

Building both quick wireframes and advanced prototypes with basic parts is a snap. On the left side of the editor you’ll find a collection of design elements like buttons, text fields and icons. Drag one into the canvas to add it to your prototype.

Adding elements to the canvas

Searching for elements

Although UXPin organizes its elements into libraries, sometimes you need to find one by name. To that end, the element search feature (cmd/ctrl-F or that icon in the top bar) lets you type a name, then drag and drop your choice into place.

The search icon

Groups

A “group” is a collection of elements that act as one. Re-positioning one element in a group moves them all, and hiding the group hides its elements.

Groups can be cropped to hide certain elements they contain, making them partially or completely hidden. Turn on grouping in General Properties. To reveal a group’s cropped elements, activate the group’s horizontal or vertical scrolling options, also in General Properties. Cropping is useful when you want to simulate smaller viewports or iframes.

Cropping a group

Above, creating a group with a crop.

Align elements with the layout grid

The horizontal layout grid (opt/alt-G) helps you create orderly designs, especially with wider apps and sites.

Setting the grid

Resources

Ask a question







< User Guide table of contents

Ben Gremillion

by Ben Gremillion

Ben Gremillion is a Content Strategist at UXPin. He’s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.

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