How to mask Elements

Hi,
how can I mask Elements (an image for example) in Axure?

In Adobe XD I just can do this:

What’s the equivalent to this in Axure?

Kind regards
Alain

Start with a shape widget first, for example drag in an Ellipse or draw your own shape with the Pen tool. in the STYLE pane, find the FILL section and click “Image”. Here is the Axure documentation for this:

Thanks for the answer.
In other words it works like the css property background-image?
I cannot move the masked image freely around with the mouse?

Pretty much. A single image is supported. The basic background-repeat values, too, and kind of background-size (with several stretch options.)

Nope. You can set an anchor point, similar to the background-position variable values, like “left top” and “center”, but not specific offsets. It would be nice if you could slide things around like Adobe products, like double-clicking it in XD, or maybe with Alt+drag or a “Transform Image” option like “move image” or something. I haven’t looked at RP10 beta too much, maybe improved there?

If you prefer XD’s method for this or need the precision, you can always create them in XD then cut & paste into Axure. They’ll come in as SVG widgets (at least in Win 10.)

A while back, in RP8 (prior to the image Fill feature) I hand-built a kind of “masking dynamic panel” to handle a bunch of “circular avatar” features like dynamically updating photos. i think the process went something like this:

  • Create a shape for your mask
  • Drag in a rectangle
    • Size it greater than or equal to your shape
    • Send rectangle behind the shape
  • Center- and Middle-Align shape and rectangle
  • Select both, right-click, choose “Transform Shape” and “Subtract” to hole-punch your shape into the rectangle–making it a “mask widget”
    • Fill with your page’s background color and no border
  • Convert to dynamic panel and deselect “Fit to Content”
  • in the dynamic panel, place an image behind the mask widget
    • You can then move and resize the image separately from the mask
    • You can also dynamically reset the image, move etc. for example if it is in a repeater
    • If you convert the image into its own dynamic panel you can also allow a user to upload a new image (faking it) and drag it around to position, resize, etc.

If you think this is a lot of work compared to XD, then yes, you’d be correct! But for most purposes I’ve found the image fill to be quick and easy, as long as my images are roughly same dimensions as my shape (so most often square images.) If I’m concerned with nailing visual look vs a mockup or behavior I go to Illustrator or Photoshop, use filters, shadows, blending, etc. to get it just right then save out as PNG to import into Axure.

In Axure 9 you can also add rounded corners to your dynamic panels, so it can function similarly to a masked object in other tools. Note that this will only work for masks that are circular or various kinds of ‘squircles’, but other irregular shapes.

  • Add your image to the canvas
  • Right click > Convert to dynamic panel
  • Select the dynamic panel and then select the Style panel on the right
  • Adjust the value of ‘rounded corners’

From there, you can move the DP as one object, but can also double click to move or resize the image within.

1 Like

@All
Thanks for those hints.
It seems to me a bit overcomplicated, but I guess this has to do that Axure manages things more in a developerperspective than in a designers perspective :wink:

Kind regards