Enhance Your Widget Libraries with Custom Widget Icons, Tooltips, and More

Recently on the blog we’ve been talking about widget libraries: how to download and use libraries built by other people and how to make your own widget libraries using Axure RP. You may have noticed that some of the libraries available for download have some nice finishing touches, like custom widget icons, tooltips, folders, and widget styles. Today, I’ll demonstrate how easy it is to add these flourishes to your own widget libraries.

Custom widget icons and tooltips can be added to a widget via the Inspector’s “Properties” tab when you’ve got your library open for editing in Axure RP. Here’s an animation of the procedure for adding them:

You can see in the animation that my “warning message” widget originally used a thumbnail view of the entire widget as its icon, which wasn’t ideal in this case because a shrunk-down version of this very wide widget didn’t communicate much visually. This particular widget really benefits from having a custom icon instead.

Widget folders, another nice touch, are quite easy to implement in your widget library: add them via the Widget Library Pages pane, just how you would do via the corresponding Pages pane in a regular project. Any folders you add to your library will show up as collapsible sections when the library is loaded into the Libraries pane for use in another project.

Widget styles also work just the same in widget libraries as they do in regular projects. And if you add a style to a widget in your library, that style will be automatically imported into any project when you add that widget to a page. Convenient! (We recommend naming any styles used in widget libraries something library-specific, like “Lib. Warning Text”, to avoid unintentional overlaps with widget styles already in the target project.)