Post Image

User Guides: Smart Elements | UXPin

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

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.

Creating a smart element

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.

Editing a smart element

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.

Accessing smart elements

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.

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