Skip to main content
Image

An element that displays an image.

Updated over 2 weeks ago

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

Did this answer your question?