UI widget libraries
In addition to basic elements in the Toolbar, there are thousands of other pre-made assets you can add to Justinmind for free. You can also create your own custom shareable libraries to define consistent brand design systems.
The Justinmind team has created dozens of interactive widget libraries you can include in your prototypes. It’s easy to add them to your Justinmind interface:
- Look over to the Libraries palette. You may find a few libraries already listed here depending on which device you’re prototyping with.
- Click on the ‘More libraries’ text link, which will open a pop-up list of libraries, like iOS icons, Diagrams, and Web Components. Tick the check boxes of the libraries you’d like to add and click “OK”. They’ll be imported into the Libraries palette.
You can now drag and drop elements from those libraries into your prototypes. Untick the check boxes in the pop-up to remove libraries from the palette.
There are even more libraries you can import into Justinmind for free:
- Click on the ‘More libraries’ text link and tap the ‘Download more widget libraries’ button in the pop-up, which will open a web browser loaded to a list of UI kits.
- Download a library you’d like to use.
- Back in the ‘More libraries’ pop-up, click the ‘Import library’ button. Select the library file (.jpl) you downloaded to import from the file browser.
- Tick the library’s check box to add it to the Libraries palette.
Build custom element libraries and share them with your teammates to create a single source of truth for your designs. Combined with Templates and Masters, you can easily develop and maintain unified branding with custom shared libraries.
Create a custom library
- Look to the Libraries palette and click the ‘+’ button to create a new widget library. Give it a title and description and click ‘OK’. You’ll see your new library in the Libraries palette.
- Design an element or group of elements on the Canvas. You can also add interactions like Mouse Over and Swipe effects.
- To add an element to a custom library, drag it from the Canvas to the library in the Libraries palette. You can also right-click on an element, go to ‘Add to Widget Library’, and select the library.
Next, write in a name and description for the element and click ‘OK’. You can now drag and drop it from the library onto the Canvas to use in your prototypes.
- Click on the ‘gear’ button next to ‘Edit Mode’ in the Libraries palette and select ‘Exit edit library’ to save the library.
You’ll also find options to create organizational groups, export, and share your widget library with your teammates here.
Edit a custom library
As the library owner, you can easily edit your custom library:
- Click on the ‘gear’ button next to the library name in the Libraries palette and select ‘Edit library’.
- Right-click on an element you’d like to edit and select ‘Edit details’ to change its name and description or ‘Edit contents’ to change its appearance and content. You’ll see the element open in a new Canvas tab, where you can make changes.
- Click the ‘save’ button on the element Canvas tab to save your changes to the library.
You can open all elements to edit by selecting ‘Edit all widgets’ from the ‘gear’ button pop-up. Make edits individually or go to the Edit menu and select ‘Replace styles’ to edit properties of each element in bulk.
Click ‘Save all widgets’ from the ‘gear’ button pop-up to save your changes to all widgets.
Share a custom library
You can share a custom library with your teammates in just two clicks:
Click the ‘gear’ button next to your library’s name in the Libraries palette and tap ‘Share’.
Your teammates can now add your library to use in their prototypes in the ‘More libraries’ pop-up.
Remove other’s access to your library by clicking the ‘gear’ button and selecting ‘Unshare’.
Commit library changes
Tap on the ‘gear’ button and select ‘Commit’ in the pop-up to upload your library’s changes. Teammates can click ‘Update’ in the ‘gear’ button pop-up for the library to download those updates.