In low-fidelity prototypes, use box, placeholder, and paragraph widgets from the Default library to indicate the approximate sizes and locations of components. Later, add real text to existing widgets or swap widgets out for final art to increase the fidelity of the diagram.
TYPES OF SHAPE WIDGETS
There are several types of shape widget. The various boxes, buttons, and headings in the Common section of the Default library are all shape widgets, along with the placeholder, label, and paragraph. The line widget is a special type of shape widget and has its own article here: Line widgets. Stickies, arrows, and markers in the Markup section of the Default library are shapes as well.
Anything drawn with the pen tool is also a shape widget—another special type, called a custom shape. Everything in the Icon widget library is a custom shape as well.
© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.
Shape widgets make up the majority of widgets in most Axure RP diagrams. Shapes are often static but may feature interactivity, such as an OnClick behavior for a button shape.
AS STAND-INS FOR CONTENT OR GRAPHICS (IN LOW FIDELITY DIAGRAMS)
The OnClick event is the one most often used with shape widgets. The default button, primary button, and link button widgets in the Default library come pre-styled with classic button looks, but any shape can serve as a clickable element when interactions are added to it.
Vector art can be created in Axure RP using the pen tool, which creates a custom shape widget. Learn how to use the pen tool to draw custom shapes in this article: The pen tool.
You can also import SVG-format vector graphics to your RP files—via image widgets—which you can then convert to custom shapes for further editing.
You can use widgets to add notes and markup to a diagram. The stickies and markers in the Markup section of the Default library are shape widgets pre-styled as markup elements.
CHOOSING YOUR SHAPE
A shape widget can be set to any of a large variety of geometric forms and other symbols. To choose the shape of a shape widget, use the "Select Shape" dropdown in the Properties tab of the Inspector. You can also get to the shape-chooser by clicking the small grey circle that appears at the top-right corner of a widget when selected on the canvas. At the bottom of the shape chooser you'll also see an option to "Convert to Custom Shape". Learn about working with custom shapes in the pen tool article.
Double-click a shape widget to edit its text. (Double-clicking gives you access to the most common editing function for each widget type.) If you want to add new text to a shape widget, you can just begin typing while the widget is selected.
LOCATION, SIZE, AND ROTATION
To move a widget, drag and drop it into place or use the arrow keys to nudge. You can also choose the exact location of a widget using the "x" and "y" fields in the top toolbar or in the Inspector’s Style tab.
When a widget is selected, a green border is drawn around it. Handles on the border can be dragged to resize the widget. To maintain the aspect ratio of a widget when resizing via the handles, hold the [SHIFT] key while dragging.
Widgets can also be resized to a specific pixel value. Use the “w” and “h” fields in the top toolbar or in the Inspector’s Style tab to set the widget size in pixels. To constrain the widget’s proportions, click the “Maintain aspect ratio” icon between the “w” and “h” fields.
Shape widgets can also be sized to the text they contain. Double-click a handle on a widget's left or right side to automatically size the widget's width. Double-click a handle at the top or bottom of a widget to set the height of the widget to its contents. Double-clicking a corner will automatically set both the width and the height.
Some shapes, such as heading, label, and paragraph widgets, already have auto-size toggled on. You can tell whether or not auto-size is on by looking at the color of the resize handles. If they’re yellow, auto-size is on; if they’re white, auto-size is off.
Rotate a widget by holding [CTRL] / [CMD] while clicking a corner handle on a widget. Drag to set the angle of rotation. You can also enter an exact degree of rotation in the "R°" field of the Inspector's Style tab. Text can be rotated to a different angle using the "T°" field in the Style tab.
FONTS, COLORS, BORDERS, AND SHADOWS
Editable properties of a shape widget's formatting include: text font and family; line, fill, and text colors; border color and thickness; inner, outer, and text shadows; and widget opacity. These properties can all be controlled from the Style tab of the Inspector, and many are also available in the Style Toolbar at the top of the interface.
Borders can be added and customized. You can set the thickness, color, and pattern of the widget border. On a shape widget, you can also choose which sides of the widget show a border.
Inner and outer shadows can each be added. Open a shadow menu and click the checkbox to add that type of shadow. The offset (measured in pixels) can be specified in both the "x" and "y" directions. The blur and color of the shadow are also set here. Inner shadows also have a "spread" setting that determines the size of the shadow.
Change the corner radius either via the Style tab or right on the canvas by dragging the triangular handle near the top-left corner of a shape widget. (Only certain widgets can be adjusted this way.)
Specify the opacity of a widget in the Style tab. By default, widgets are 100% opaque.
CONVERTING TO AN IMAGE
If you want to swap out a placeholder or other shape for a real image, you can convert your shape widget to an image widget while maintaining all notes and interactions. Just right-click the shape widget and choose "Convert to Image".
Interaction styles are alternative sets of style properties (e.g. color, border, font weight) which are applied in certain situations, for example after a widget is clicked.
Widgets can have the following interaction styles:
MouseOver: When the cursor moves over a widget
MouseDown: When the widget is clicked on but not yet released
Selected: When an interaction has set the widget to its selected state
Disabled: When an interaction has set the widget to its disabled state
In each scenario, the alternative look you've configured for that interaction style will be applied to the widget. If you haven't set up a given interaction style, the widget's look will remain unchanged during that interaction.
The interaction styles of each widget are configured in the Properties tab. Click the name of an interaction style to open the "Set Interaction Styles" dialog. Check the checkbox next to a style property and configure it to add it to the overall interaction style. In addition to choosing from specific style properties, you can also choose to apply a widget style as an interaction style.
The quickest way to add a link to a shape widget is to select the widget and click "Create Link" in the Interactions tab. A list of pages in the project will appear. Click on the name of the target page to create the link and close the dialog. Learn more about creating interactions here.
With selection groups you can create a relationship among a group of widgets such that only one widget at a time can be set to its selected state. When any widget in the group is selected, all others are automatically deselected. A deselected widget will revert to its base style.
Use the "Selection Group" field in the Properties tab to add a widget to a selection group. To add a new selection group to the page, type a name in the field. You can also choose an existing group from the dropdown. To remove a widget from a selection group, delete the group's name from the "Selection Group" field.
Note: widget opacity is a separate property from fill, border, or text opacity, all of which can be set in their respective color pickers.