Axure Tutorial: Common Widgets - Image


This article is a part of course Axure Full Course: Tutorial, Tips and Templates.

Image is the widget we use to load various images, and its basic properties are similar to shapes, but also has its own unique properties.

Let's introduce these unique properties today.

Import an Image

Drag the image widget into the canvas and double-click the image widget to import the image. When importing, if the image is very large, you can choose whether to optimize it.

Fit to Image

When importing an image, we can decide whether the size of the image should be the same as the size of the image widget or the original size of the image. By default, the imported image is the same as the image widget.

If you change the size of the image widget, the imported image will be the same size as the image widget.

If you want to change the size of the image to the default image size, click the Fit to Image button on the right pane.


Adjust Color

You can adjust the color of the image directly in Axure, click the Adjust Color button in the Style pane on the right, and you can adjust it in the pop-up panel.

Slice Image 

The Slice image feature is used to divide an image into 4 parts. After selecting the image, click the Slice button, select the center point to be sliced, and slice the image into 4 parts.

Slice Image to 4 parts

Crop Image

If there are extra parts of the image that need to be cropped, you can click the Crop button, adjust the part that needs to be cropped, and crop the image.

Clear Image of Image Widget

You can directly clear the image in the image widget without deleting the widget, so you can import a new image.

Click the Edit Image button, and then click the Delete button on the pop-up panel to delete the image.

Image Fill of Image Widget Vs Image Fill of Shape Widget

There are two widgets to import image, one is Shape, the other is Image. So what are the advantages and disadvantages of them?

  1. The image size imported with the image widget can choose Fit to Image. The image size imported with shape can only be consistent with the size of the Shape.
  2. For image imported with shape, you can choose various filling modes, such as Image Repeater, while image imported with image can not change its default fill mode(Stretch to Cover). 

Input Text into Image

You can't directly double-click the image to enter text, this will cause the uploading image window to appear, you can right-click the image and select Edit Text to enter the text.

Right click to select Edit Image


That's all for today's lesson.In the following lessons we will continue to introduce commonly used widgets.

If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting!

Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design. 

Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.