Create Custom Widget Libraries

Learn to create your own custom widget libraries.

Contents

Custom Widget Libraries Overview

Load Custom Widget Libraries

Create Custom Widget Libraries
     Set Custom Widget Properties
     Preserve Corners

Custom Widget Libraries Overview

You can create your own library of custom widgets and load them into the Widgets pane (available in Version 5.5+). This can be useful for creating libraries of icons, design patterns, or branded elements. Since the libraries are created as standalone .rplib files (separate from .rp files), you can easily share them with teammates or others in the community.

Sample libraries are available for download on the Widget Libraries page, including a library of commonly used icons and libraries based on the Yahoo! Design Stencil Kit.

Load Custom Widget Libraries

Select “Load library” from the dropdown menu in the Widgets pane and browse to the .rplib file. After loading the library, it will appear in the widgets pane.

Library files saved in your My Documents/My Axure RP Libraries folder will automatically load when Axure RP starts. Other libraries will need to be loaded each time Axure RP is started.

To unload a library, select “Unload library” from the dropdown menu.

Create Custom Widget Libraries

Select “Create library” from the dropdown menu in the Widgets pane, and name your .rplib file.

After the .rplib file is created, a second instance of Axure RP will open. Because this is a library file, the Sitemap pane will be replaced with a Widget Library pane where you can add, delete, and organize the widgets in the same way you manage pages in the Sitemap.

Create custom widgets using existing widgets (including widgets in other custom widget libraries) and images in the same way you design pages.

Annotations and interactions added to widgets within custom widgets are preserved when the custom widgets are added to the wireframe pages.

For example, if you create a switch button that toggles between an on and off view using dynamic panels and interactions, the button will have the interactions when added to a page.

To view your new custom widgets in the Widgets pane, save the library file (File->Save, or Ctrl+S) and select “Refresh Library” from the dropdown menu in the Widgets pane of the original instance of Axure RP.

Tip: To make a custom widget that is a grouped element when added to a page, group the widgets in the custom widget in the .rplib file (Ctrl+A to Select All and Ctrl+G to Group).

Set Custom Widget Properties

To import a custom icon for the Widgets pane, right-click on the widget in the Widgets Library pane, and select “Widget Properties”. By default, the icon that appears in the Widgets pane for the custom widget is a thumbnail of the actual widget.

In the Widget Properties dialog, you can also add a tooltip with additional information such as a description, instructions, or attribution. The tooltip will display in the Widgets pane when you click on the Information icon next to the widget.

Preserve Corners

The preserve corners feature is useful if you are creating button graphics or dialog boxes as custom widgets. Preserve Corners allows you to scale images without stretching the corners of the image.

To preserve the corners of an image, right-click on the image and select Edit Image->Preserve Corners.

This brings up guides with two arrows above and two arrows to the left of the image that determine the size of the corners to preserve. Drag the arrows to adjust the corners.

Summary

You're all set to begin creating your own custom widget libraries. Got a question? Email us at support@axure.com.

 Use Conditional Logic  View All Apprentice Level Articles Continue to Master Level Articles