Totalwireframe is now free for everyone.

Oh! You are the type of people who browses the web on your mobile. Good, good. Everything works on mobile, including the purchase process.

Introduction to libraries

  • Duration: 03:20
  • Level: intermediate
  • Axure Version: 7.0+
  • Date: Jun 26, 2015


Let's talk about an important time saver Axure provides: the libraries.

By default, Axure comes with two libraries: what they call the Default one, the other called Flow. They are essentials for creating wireframes.

You can add more widgets by adding libraries, such as the ones provided by Totalwireframe. If we take a look at the Axure Essentials library, you can see that there are way, way more widgets than the one provided by default by Axure. For instance, instead of creating complex widgets yourself, you can simply drag and drop ready to use widgets, and it's done. I think it's awesome. The default libraries provided by Axure contain very simple widgets that have only one shape - but you can have widgets with hundreds of shapes.

For your business, you could create your own set of libraries with your own set of widgets that are unique to your needs. That way, if you need to do the same things over and over, simply create a library and you will be able to reuse your widgets from projects to projects.

One of the use cases for that would be if you'd need to work over the same website over and over. You could have your own widgets representing your menu, a footer, a custom form. Let's create a library as an example. Select this option in the menu, and give the library a name. Store it wherever you want (in Dropbox, that would be a good idea).

The User Interface when you edit a library is approximately the same as the one when you edit your wireframes. The main difference is the Sitemap section. You don't see pages now, you see Widgets. The bottom part of the UI is also different. We'll cover that later.

Now double click on the New Widget 1 widget and let's create a header widget. We add several rectangles… we add several menu items… and when we are done, we save our work. Then we change the name of the widget to “Header - Menu”. Here we go.

Now, save your work again.

Let's go back to your original wireframe. You will have to load the library you just created to start using it. To do that, click here and select the Load Library menu option. Once it's finished loaded, you will see your newly created widget. You can drag and drop it into your wireframe for immediate use. It's awesome. Let's enhance the look of this widget.

Every time you change something inside your library, your changes will be instantly reflected the next time you use the library in one of your project. Here, if I change this on the widget inside the library, I just need to refresh the library on my current project to see the modification.

Go back to the library and notice that you can add an icon to the widget. There are two sizes as the bigger size is displayed when the screen has a very high resolution - basically, what Apple calls retina.

Next to the icon you can see that there is a field for the tooltip. The tooltip appears when you mouse over a widget… like here.

Here what we had to say about the libraries in Axure.

Continue your learning