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.
- Adding and sharing Smart elements
- Editing Smart elements
- 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”.
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).
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.
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.
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.
Importing pre-made Smart elements
We have created loads of pre-made Smart Elements for you! 100 % for free! Go to
http://uxporn.uxpin.com/ to navigate among them and download the ones you like.
After you my friend!
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.
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!