How To Know If A Free Or Paid Axure Library Is Bad

Posted By Debbie on October 12, 2015

There are outside companies and people that offer libraries you can bring into Axure. These widget libraries might be free and some are paid.

I’ve been shocked to see that some free and paid ones are poorly constructed (and I’ll explain how momentarily). I’ve asked Axure what they do when they see someone create a “bad” library. They told me they contact that person and suggest they improve it. They said very often, that person doesn’t improve the library… they just lower the price (or keep it free).

That means there are BAD Axure libraries out there. Libraries I don’t like. Libraries Axure doesn’t like. I’m going to pick on one as an example of what makes a library bad and why you’d want to not buy it (or ask for your money back if you see something like this in a library for which you paid).

Global Widget Styles

For years, Axure has had a handy feature that allows you to create global visual styles for lines, shapes, buttons, text, backgrounds, etc… That way, if you want all of your buttons to look the same, you apply one global style. If someone decides later to change the way that button looks, you just change the global style and they all fall into line.

The opposite of this is styling things manually in Axure, widget by widget. Going to a button and manually choosing font size, colour, background colour, outline colour, etc… If someone later wanted all your buttons to be another colour, you’d have to find each button and change it by hand.

Using global Widget Styles makes sure you are never in that pickle!

Some Axure Libraries Don’t Use Widget Styles

Using Axure widget styles can future proof things and make styling so much faster and easier. Yet I find that many people don’t know about widget styles. Still, that’s not excuse for offering and in some cases selling a library that uses no styles.

Here is an example of a library produced by someone who isn’t me and isn’t Axure.

ScreenHunter_1095 Oct. 11 12.19

This looks like a nice button you might want to use over and over. It’s set up to be a blue button and it has a mouseOver style and mouseDown style (see the middle of the right side for those styles).

However, we can also easily see that it’s not using global widget styles. We know this three ways:

  • With the button selected, look at the top left for the droplist that shows which global style is on this button. NONE. It says “default.” That means this button is not using a global style.
  • Look to the right in the middle pane to see the Interaction Styles. MouseOver shows hexadecimal codes. If there were a global style there, we’d see the name of it. Under that is the MouseDown style. We see manual formatting like does it have a shadow and what are hexadecimal codes for colouring. Not a global style.
  • Open the Widget Style Editor (pictured below). Notice there are NO custom styles. That’s because the guy who built this library built NO global styles.

ScreenHunter_1096 Oct. 11 12.25

If you drag this blue primary button all over your project and then decide later you want the button to be another colour, get ready to go through your whole document, find each button, and change the styling manually. Want to change those interaction styles later for every time you used this button? Find every button and change it manually.

I can’t believe someone can sell that or give it away.

That’s not fair to you. At that point, what have they really built? They’ve made something worse than you could have made yourself. What’s the point! How long would it take to fix? Probably a few hours.

This is not just in this library. It’s in others as well. I would either forget about these “bad libraries” OR make sure you first spend what could be hours to redo all the manual styling as global styling. Why the guy who made the library wouldn’t do that, no idea. But just because he’s lazy and doesn’t believe in best practices doesn’t mean you should follow along! Be and do better!

What would it look like if this were done correctly?

How can you know if a library item is using global styling (potentially correctly)? See this screen shot:

ScreenHunter_1097 Oct. 11 12.27

Here’s I’ve applied three global styles to this button. One is the button in its default state (Primary Button, seen in the droplist on the top left). The others are the MouseOver and MouseDown seen on the right side, one style for each.

And then you’d want to see secondary buttons styled separately. Headlines styled separately. Text styled separately. Warnings and messages styled separately. Everything in Axure can have global styles. It’s nearly a crime to not use them. It’s doubly a crime to not use them and sell what you made to others as some sort of awesome starting point.

Buyer beware!