Post Image

Interactive Prototypes Made Easy: Reusable Design Elements (Smart elements feature)


Let’s say your main navigation system or header is a really complex set of elements. Certainly don’t want to recreate that from scratch! And certainly don’t want to introduce completely new elements where the user expects, for instance the same way to navigate as in the page before. :) Instead, save that complex set of elements as a Smart element. Then you will be able to add it with one simple click, regardless of which page, wireframe or even project you work on!

Below is a step-by-step on how to create, edit, share even import pre-made reusable design elements in your whole UXPin account.


  1. Adding and sharing Smart elements
  2. Editing Smart elements
  3. Importing pre-made Smart elements

Adding and sharing Smart elements

The first thing you want to do is to select all the elements you want to turn into a Smart element. Then right-click and select “Create Smart element”.

UXPin - reusable smart elements, setting up

A popup window will appear where you can name the Smart element and decide where you will be able to use the Smart element. Check the box “Share this element with all the other projects” if you want to be able to use it in the whole account (if you want to share within specific projects only, we’re going through that a little further).

UXPin - reusable smart elements, sharing throught the project

Forgot to check the box? No worries! Just locate the Smart element in the Smart element library (Ctrl + Alt + C) and click the pencil icon to rename it. That will make the same menu pop up again.

UXPin - reusable smart elements, editing element name

You can also share Smart elements within specific projects only. To do that, first hover over any Smart element in the Smart element library. If the Smart element isn’t already shared with the project you are using, then you will see a fourth option. Namely “Copy To Project Elements”. Click that button.

UXPin - reusable smart elements, editing element name

Editing Smart elements

Once you made a Smart element, you might want to edit it. Select the edit icon to do that (or double click the Smart element if you have added it to the workspace). Then you will enter the edit mode. Press the “X” when you are done. Any changes will be saved automatically.

UXPin - reusable smart elements, editing

Importing pre-made Smart elements

We have created loads of pre-made Smart Elements for you! 100 % for free! Go to to navigate among them and download the ones you like.
After you my friend!

User Interface Design Patterns and Wireframe Templates - UXPorn by UXPin

I found this Smart element. The picture to the left shows what it looks like before hovering over it, and the picture to the right shows what it looks like on hover. The latter state is also what it will look like in UXPin.

UX Porn Smart Elements example

To import a Smart element, click on “Upload wireframe to your UXPin account”. Now, go to the Smart element library (Ctrl + Alt + C) in UXPin and locate the imported Smart element. All elements imported from UXPorn are available in the category “UXPorn elements”.

Found anything you like? Remember that you must first be logged in to your UXPin account for this to work! If you don’t have an account yet, sign up for a free trial here. You’ll be able to test the Smart Elements feature and tons of other goodies!

Thanks for reading and take care!

by hello

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