Auto Sizing Images in Axure 8

auto-sizing-images-in-Axure-8

If you’ve begun working in Axure 8, you’ve no doubt realized that importing images into your prototypes is different. In 7, upon swapping out an image, you would get a dialog box asking if you’d like to auto size the image.

autosize dialog

If you spend any time on the Axure forums you’ll notice a fair amount of complaining about this feature. Since users would have to make a selection each and every time they import an image. In response, Axure 8 has done away with the dialog box. And instead your images are either auto sized or not auto sized based on something that could be quite easy to miss if you aren’t looking carefully. Let me elaborate.

Images have anchor points, just like they did in 7. But now those anchor points can be either yellow or white. See below.


The image on the left has anchor points that are yellow, and the image on the right has anchor points that are white.  And you can toggle back and forth by double clicking on an anchor point. (Easy to miss, given how small they are.)

If the anchor points are white, an image will NOT auto resize.  The image will instead take the shape of whatever image H and W you have defined the image element to be.

If the anchor points are yellow, an image WILL auto resize.

Pretty easy right?

Let’s say you make a mistake and load in an image with white anchors, but you wanted the image to resize.  No problem.  You can double click the anchor points, which will turn them yellow, and also instantly auto resize the image to its initial dimensions.

If you don’t want to mess around with the anchor points, you can also click a new button located in the Inspector called “Fit to Image.”  This will take an image and resize it back to its original dimensions.  But I personally find it easiest to simply click the anchor points to change the image around.

Hope that clears this issue up, as it’s something I struggled with out of the box.

Happy prototyping!

 

Advertisements

Author: Adam

Founder of AxureThemes.com, and Senior UX prototyper.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s