How to add UI libraries to your prototyping tool
Add more UI libraries to your prototyping tool, to make your web and mobile app wireframes unique with Justinmind.
Justinmind’s widget libraries allow you to save groups of screen UI elements and use them in other screens or other wireframes. For this reason, they are perfect for defining style guides. Once you drag an element from a library to the editor canvas, you can change it as you wish and this won’t affect the library in any way: the widget in the library will remain unchanged and you will be able to use it in another screen or prototype, or in the same ones.
Justinmind comes with a set of default widget libraries already installed, but you can also add your own ones. Let’s see how to import a widget library in the editor.
1) Under the ‘Widgets’ menu, select ‘Add/Remove libraries‘ and the window “Manage Widget Libraries” will pop up.
In the window, you’ll find 2 tabs:
– Default Libraries (a): a list of all the available default widgets;
– My Libraries (b): a list of your own custom widgets.
You can add any widget library to the Widgets palette in Justinmind editor by simply clicking on the “+ Add to widgets” button that you’ll find below each library’s description.
For additional devices, we offer quite an extensive collection of UI libraries (iPad, iPhone, Apple Watch, Android, Windows, iOS) that you can upload and use for free. You can find them on this page.
Let’s see how to use them on your web or mobile wireframes.
- Download a widget library .jpl file
- Open Justinmind, start or open a prototype, and select the menu option ‘Widgets -> Add/Remove libraries‘.
- Select the My Libraries tab: through the “Import library” field locate the .jpl file you downloaded and click OK. After having imported it, it will be listed under the “My Libraries’ tab.
- Press the ‘Add to widgets‘ button: the library will show up in the Widgets palette in your current prototype.
- Close the dialog and just drag the widgets you want to the canvas.
The widgets in ‘My Widgets’ are specific to your editor, not to your wireframes. This means that another user might have a different set of widgets in there.
Warning: some Internet browsers automatically rename the .jpl files to .zip when you download them from the website. Just rename them back to .jpl so you can use them in Justinmind.
Good job! You finished the second section of the Beginners course! 3 more sections to finish the entire course!