UI widget libraries

Use Justinmind’s UI widgets to create the visual content in your prototypes. Drag and drop them onto the Canvas, and customize and animate them to make realistic and interactive designs.
ui-widget-libraries-1
Justinmind has over 4000 UI widgets to help you create your web and mobile prototypes, including readymade screens, icons and content blocks for iOS and Android app design.
Other libraries

Widgets are organized into widget groups within Widget libraries, such as Lines and Shapes, Forms and Inputs and Navigation widget groups within the Basic Widget library.widget-groups-1

Pre-installed widget libraries

By default, the Basic Widget library comes pre-loaded when you create a new prototype, and can be found in the Widget library palette in Justinmind’s editor.
pre-installed-widgets-1
This library consists of the building block widgets that make up the basics of your interface, such as shapes, text boxes and paragraphs, images and callouts.

Depending on the type of prototype you’re creating, other widget libraries may also come pre-loaded (e.g. if you create an Android mobile prototype, the Android Phone Widget library will appear under the Basic Widget library).android-widgets-1
You can find a description of all the Basic widgets in our User Guide.

Load pre-installed widget libraries

To load or remove pre-installed widget libraries:

  1. Go to Justinmind’s main menu.
  2. Select the “Widgets” option and then “Add/Remove libraries” from the drop-down.
  3. From the “Default libraries” tab in the “Manage Widget Libraries” dialog that appears, choose a widget library to add/remove.
    • Click “Remove from widgets” to remove a currently loaded library.
    • Click “Add to widgets” to add a library to your Widgets palette. Your chosen library will appear in the Widget library palette.
  4. Click the ‘X’ to exit the dialog.

You can also add these libraries from the Widget library palette by clicking on the ‘Add widgets’ text:
pre-installed-widgets-1

Note: Each prototype stores the widget libraries that were used the last time the prototype was opened.

Additional widget libraries

In addition to the pre-loaded Widget libraries displayed in the Widget library palette, there are other libraries available for you to load in your Justinmind editor. Justinmind offers a wide range of libraries for different operating systems and front-end frameworks, including Bootstrap, Kendo UI, Salesforce, SAP, FontAwesome, and more.
Add other widget libraries
You can download additional libraries here.

Import additional widget libraries

To download and import additional Widget libraries:

  1. Go to our Widgets page, download and install the desired library.
  2. Go to Justinmind’s main menu in the Justinmind editor.
  3. Select the “Widgets” option and then “Add/Remove libraries” from the drop-down.
  4. Select the “My libraries” tab from the “Manage Widget Libraries” dialog that appears.
  5. From the “Import Library” file browser, locate your installed Widget library to import it (it will be listed with a .jpl extension).
  6. Once imported, the library will be listed in the “My libraries” tab.
  7. Click “Add to widgets” to activate the library in the Widgets palette.
  8. Click the ‘X’ to exit the dialog. Your widget library will appear in the Widgets palette.

Creating custom widget libraries

With Justinmind, you can create custom UI libraries and build unique web and mobile app prototypes specific to your brand.

To create a custom Widget library:

  1. Select the “Widgets” main menu option and then “New widget library” from the drop-down.new-widget-library-2
  2. Give your new library a name and description and click “OK”. Your new library will appear in the Widgets palette.name-library-1
  3. Design your UI element in the Canvas.
  4. Drag and drop the UI element you have just designed from the Canvas to the library. In the dialog that appears, give your new widget a name and description, and click “OK” to exit the dialog.
  5. From the gear icon on the right of your new library, select “Exit edit content” to start using the widgets in your prototypes.exit edit content
  6. You can also create groups (a way to classify UI widgets) in your custom libraries, by selecting “New group” in the “Edit content” menu. Give this widget group a name and drag and drop the widgets into it.

You can also share and sync custom widget libraries with other users in your account. Learn more about this here.

Note: any Events associated with an element will be saved along with the element itself, and it will be interactive by default.