Justinmind

SUPPORT

Learn how to prototype web and mobile apps

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.

 

Add custom or default widget libraries to your web or app prototypes

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.

Default widget libraries in your prototyping tool

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.

  1. Download a widget library .jpl file
  2. Open Justinmind, start or open a prototype, and select the menu option ‘Widgets -> Add/Remove libraries‘.
  3. 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.
  4. Press the ‘Add to widgets‘ button: the library will show up in the Widgets palette in your current prototype.
  5. Close the dialog and just drag the widgets you want to the canvas.

Add custom widget libraries to your web or app prototypes

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!

Next tutorial > Wireframe template styles and fonts

10 Comments

  1. Charlie

    September 8, 2014 at 7:19 pm

    I am trying to add new libraries and it does not work. When I extract the files there is not any .jpl file

    • admin

      September 9, 2014 at 7:06 am

      Sometimes, the browser renames the .jpl file to .zip at the time of download. Just rename it back to .jpl and you’ll be able to import it inside Justinmind

  2. Alberto

    January 27, 2015 at 1:33 pm

    I’m trying to add widgets but when I close the programm and I open again, then there are only three Android Widgets Libraries (Basic, Tablet, Icons).

    By the way, I have pro edition.

    • Lidia Rodriguez

      March 6, 2015 at 10:40 am

      You can manage widget libraries by clicking on the ‘+’ icon on the upper-left part of the widget tab.

  3. pilar

    August 10, 2015 at 11:48 am

    Hi there, will you be adding more libraries such us metronic? http://www.keenthemes.com/preview/metronic/
    Thnks

    • Danielle Schneider

      August 10, 2015 at 8:50 pm

      Adding that widget library is not a priority right now, but is an option for the future.

  4. Omer

    October 7, 2015 at 8:21 am

    Is it possible to import our Axure libraries?

    • Danielle Schneider

      October 7, 2015 at 6:09 pm

      This is likely not possible unless the library is an image or can be converted into a compatible format.

  5. Lukasz

    October 12, 2015 at 9:40 am

    Is it possible in free version to make a new libraries and use them?
    I see this option in trial version, but it will be always available?

    • Danielle Schneider

      October 12, 2015 at 2:21 pm

      Once you are switched to the free version, you will not be able to make and import your own widgets. You will only be able to use the widgets included in the add/remove libraries menu.