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.

Justinmind pre-made assets

Pre-installed libraries

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:

  1. Look over to the Libraries palette. You may find a few libraries already listed here depending on which device you’re prototyping with.View and use extra pre-made libraries in the Libraries palette
  2. 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.
    Click more libraries and then tick the check box of a library you would like to add to 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.

Downloadable libraries

There are even more libraries you can import into Justinmind for free:

  1. 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.
  2. Download a library you’d like to use.Find UI kits to download at justinmind.com/ui-kits
  3. 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.
  4. Tick the library’s check box to add it to the Libraries palette.

Custom libraries and design systems

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

  1. 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.Click the plus button to create a new library
  2. Design an element or group of elements on the Canvas. You can also add interactions like Mouse Over and Swipe effects.
  3. 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.

    Drag a widget to the custom library to include it in 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.
  4. Click on the ‘gear’ button next to ‘Edit Mode’ in the Libraries palette and select ‘Exit edit library’ to save the library.
    Click on the gear button and select exit edit library to save the widget 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:

  1. Click on the ‘gear’ button next to the library name in the Libraries palette and select ‘Edit library’.
  2. 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.Right click on a widget to see options to edit its name or content
  3. Click the ‘save’ button on the element Canvas tab to save your changes to the library.Click the save button on the canvas tab to save edits to the widget

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’.
Click the gear button and select share to upload your widget library for teammates to access
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.
Click the gear button and select commit to upload changes to the shared library