Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create custom UI libraries for your prototyping tool

Create custom UI libraries for your prototyping tool with the help of this tutorial. With them, you will be able to build unique web and mobile app prototypes specific to your brand. Note that the option to share UI libraries is only available for Justinmind Enterprise users. 

1. Select the menu option ‘Widgets>New Widget library‘.

Create a new custom widget library in your prototyping tool

2. Give it a name and click OK. The new library will show up in the Widgets palette with the name you have assigned it (in our example My Widget Library).Name your new custom widget library

3. Design your widgets in the canvas or upload them as images.

4. Drag widgets from the canvas to the library in the Widgets palette.

Design your custom widgets and add them to the library

5. Click on “Exit edit content” to start using the widgets in your wireframe or prototype.

Exit "edit mode" and use custom widgets in your web and mobile prototypes

You can also create custom UI elements from a grouped set of widgets, by selecting “New group” in the “Edit content” menu. Drag and drop the widgets into the “New group” tab.

If the elements inside a group have events, those events will be saved with the widgets, which will become interactive by default.

All the libraries that come with Justinmind have been created this way. A good example of interactive widgets, i.e. groups of widgets that bring events with them, are the Parallax elements. In the Parallax tutorial section, you will learn how these pre-built widgets are just groups of basic widgets with some events applied to them.

You can learn a lot about how to build great libraries by checking how the widgets in the default libraries have been created.

Next tutorial > Reuse content using Templates

4 Comments

  1. awika

    August 19, 2015 at 5:08 am

    I would like to create my own widgets for use in my prototype, but I don’t know how to create it. Can you give me a tutorial? Thank you

    • Lidia Rodriguez

      August 19, 2015 at 9:58 am

      Hi Awika, there’s a small description on how to do it in this post. If you need further assistance contact us through jim.support@justinmind.com.

  2. Michelle

    November 13, 2015 at 1:03 pm

    Hello! I’ve already downloaded some of the available libraries you have (Bootstrap, FAwesome, etc). But I still feel there’s a lot of items the app lacks :-( So when creating my own library of widgets, is it possible to import new items (i.e. a dropdown) as vector objects? And as a plus, could these vector items be modified within JIMind? Thanks for such an AWESOME app!

    • Sonia Duran

      November 16, 2015 at 11:58 am

      Hi Michelle,

      Yes, you can create your own library with some vector objects, however it won’t be possible modify them with Justinmind application. For further information please check out this tutorial:
      http://blog.justinmind.com/justinmind-svg-vector-files/

      Best,

      Sonia Durán