Skip to main content

​
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.

​
Properties

In addition to the properties below, images also have access to general object properties in the Expression Editor.

​
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. 
Image.image
Type: string
Values: imageID , #imageVariable
Can get or set the current image asset.
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)
Image.contentHeight

Image.contentWidth
Type: number
Can get or set the value.

​
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) 
Image.tint
Type: color
Can get or set the tint color or an individual color property.

​
Fade In On Load

Choose if the image will fade in smoothly once it’s fully loaded in prototypes.

​
Resources

Related Triggers & Actions

Image Event Trigger

Set Image Action

⌘I