Custom libraries are sets of elements that you can share with your team, encouraging everyone to design with the same look and feel. They also prevent design busywork by providing pre-made elements that anyone can use. That means you can go from requirements to the end product faster and with fewer annoying inconsistencies.
UXPin’s collection of elements are organized into libraries such as “Social Widgets,” “General Web UI,” and “FontAwesome Icons.” Your team’s custom library is no different — except that people with permission can add and remove elements as they see fit.
Accessing custom libraries
You can add your team’s library to the available element list in your editor as you would any other library. Tap “manage libraries,” then tap the “team library” button and hit save. The team library will appear at the top of your element library list.
Using a custom element
As with any library, dragging elements from the team’s custom library will place it on the canvas. Unlike smart elements, editing the original will not alter copies places on the canvas. That means you can edit copies in prototypes without altering the original — or altering copies used in other prototypes.
Case in point: we use a standard footer on most pages at www.uxpin.com. But standard isn’t always consistent. We customize footers and calls to action as appropriate to each page, but they all begin from the same custom element.
Adding to a custom library
Users with permission can add any element or elements to a custom library. Right-click on an element, set of elements, or even a group, then select “add to custom library.” Links, animations and multistate elements are retained.
Deleting and renaming custom elements
Hover over an element in a custom library, and a red trash can icon will appear. Tapping that icon will delete the element at hand. You can not un-delete an element.
Double-clicking the element’s name will let you edit what it’s called.
Changing Custom Elements
Elements in a custom library can’t be directly edited — but you can replace them in a few easy steps.
- Drag the element you want to change into the canvas.
- Make the changes.
- Re-add the element to the custom library.
- Delete the original.