Overview
Image elements are for adding photographs, patterns, or other images to your design. Image elements are customizable with properties like corner radius and content mode.
In macOS, you can add an image to your page, canvas, or selection using the I key.
Element Properties
Image
Select the image asset. Upload an image from the Assets Panel, drag and drop it into the canvas, or use a stock photo from Play's Unsplash library.
Want a shortcut? You can jump right to the Image property by double-clicking/tapping on an image element on your page.
Content Mode
Set how the image is positioned within the element:
Aspect Fill: The image will scale up to fill the element’s bounds, preserving the aspect ratio but potentially cropping the image. (left below)
Aspect Fit: The image will scale down to fill the element’s bounds, preserving the aspect ratio but potentially leaving some of the element's area unfilled. (center below)
Fill: The image will stretch to fill the element’s bounds on both axes, changing the aspect ratio if necessary. (right below)
Tint
Set the color for any non-transparent part of the image. (only available for PNGs)
Fade In On Load
Choose if the image will fade in smoothly once it's fully loaded in prototypes.
Expression Editor Properties
Content Height
Image.contentHeight
Current content height of the image element.
Content Width
Image.contentWidth
Current content width of the image element.
Image
Image.image
Current asset of the image element.
Tint
Image.tint
Current tint color of the image element.
Image elements also have access to general object properties.
Resources
Related Triggers & Actions
Image Event trigger
Set Image action