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)
Rendering Mode
Set how UIKit should apply colors to an image with tint color set:
Automatic
Always Original: Uses the original color data from the image.
Always Template: Uses the tint color, if set, in place of the image's original color.
Tint Adjustment Mode
Set how UIKit adjusts the tint color in situations where the app window is not in focus, like when presenting an alert):
Automatic
Normal: Uses the tint color (or original color from the image data) even when an alert is presented.
Dimmed: Uses a dimmed version of the tint color (controlled by UIKit).
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