Image Widgets

Use the image widget to add both static image assets and animated GIFs to your designs. The following file types are supported: JPG, PNG, GIF, BMP, and SVG.

Adding Images to Your Designs

Blank Image Widgets from the Libraries Pane

Drag a blank image widget onto the canvas from the Libraries pane. Then, double-click the widget or right-click and select Import Image to search for an image file in your operating system's file browser.

When you load an image, the image widget will automatically resize to the original size of the image being imported. To prevent the image widget from resizing, select it and double-click one of its resize handles before importing an image file. The resize handles will change from yellow to white, which indicates that the Fit to Image feature has been toggled off.

You can enable auto-fit again at any time by double-clicking a resize handle or clicking the Fit to Image icon in the Style pane.

The Insert Menu

Click the Insert menu at the top-left of the interface and select Image to browse for an image file in your computer's file browser. The selected image will be inserted into your design at the center of the canvas.

Loading Local Image Folders

You can add a local folder of images from your computer to the Libraries pane by clicking the Add Image Folder icon at the top-right of the pane. You can then drag images from the folder onto the canvas.

Whenever the folder's contents change on your computer, they'll be updated automatically in Axure RP as well.

Image folders are indicated by an image icon in the list of libraries.

Copy and Paste onto Canvas

You can copy and paste images directly onto the Axure RP canvas from popular graphics editing, diagramming, and presentation tools.

Drag and Drop File onto Canvas

You can drag an image file from your computer's file browser and drop it onto the Axure RP canvas to create a new image widget with the selected image already loaded.

Image Fills on Shape Widgets

You can set the background of a shape widget to an image. Keep in mind, though, that the image editing options below are not available for image fills on shape widgets.

Editing Images

Color Adjustment

You can adjust the color of images via the Color Adjust menu in the top section of the Style pane. Check the Adjust Color box and then use the sliders or the number fields below to change the image's hue, saturation, brightness, and contrast.

Click Reset to set the fields back to their default values, or uncheck Adjust Color to toggle the image back to its default levels without affecting your selection for each attribute.

Cropping and Slicing

You can slice or crop a selected image by right-clicking it and choosing either option in the context menu, or you can use the S and C keyboard shortcuts.

Tip

You can also customize the top toolbar to add Slice and Crop buttons to it.

The slice tool separates the image into several parts, each of which becomes a new image widget. You can slice with a horizontal, vertical, or cross cut.

The crop tool contains several options:

• Crop: Removes all parts of the image outside the selection box
• Cut: Removes the portion of the image inside the selection box and copies it to the clipboard
• Copy: Copies the portion of the image inside the selection box and leaves the original image unchanged

Flipping

To flip an image either horizontally or vertically, right-click it and go to Transform Image → Flip Horizontal or Flip Vertical.

Preserving Corners

You can keep the corners of an image from being distorted when the image is resized. This is useful when working with graphics that have corners that don't resize nicely, like rounded corners.

Right-click an image widget and select Transform Image → Preserve Corners in the context menu. Triangle markers will appear at the top and left of the image to indicate the areas of the image that will not be resized with the rest of the widget. You can drag the triangle markers to resize the preserved areas.

Note

You can't preserve corners on an empty image widget. Make sure to load an image file into the widget before trying this.

Rotating Images

Use the Rotation field at the top of the Style pane to rotate selected images on the canvas. The field accepts positive and negative degree values with up to two decimal places. Positive values rotate images to the right, and negative values rotate images to the left.

Clearing Images

You can clear the image file from an image widget without deleting the widget itself. In the Style pane, click Image in the Fill section, and then click the red X at the top-right of the preview image.

Adding and Editing Text

You can add text to an image widget or edit its current text via any of the options below:

• Right-click the image and select Edit Text in the context menu
• Hold CTRL (Windows) or CMD (Mac) and double-click the image to enter text-editing mode
• Select the image and begin typing. (This option is only available if you have disabled the single-key shortcuts)

Optimizing Large Images

Large images can increase the size of your RP file and affect performance within Axure RP and in the web browser. Optimizing an image will decrease its file size and thus the size of the RP file. As a result, however, the image's quality may be decreased.

When you import a large image into Axure RP, you'll be asked whether or not you want to optimize it. You can also optimize images already in the RP file by right-clicking and selecting Transform Image → Optimize Image in the context menu.

Note

Optimizing a PNG will remove any transparency it may have, and optimizing an animated GIF will remove its animation.

Selection Groups

You can create a relationship between a group of shape, line, image, and/or dynamic panel widgets in which only one widget at a time can be set to its selected state with the Set Selected/Checked action. (This is similar to the relationship between radio buttons in a radio group.)

To learn more, check out the Selection Groups article.