Skip to main content

Overview

You can access the properties of the iOS device the prototype is currently being viewed on through the Expression Editor. You can use these properties in equations, conditional statements, and functions to make prototypes responsive.

Accessing Device Properties

To use the current value of a device’s property, use this structure:
device.property
For example, let’s say you’re creating a scrolling progress bar. To set the progress bar’s width, you’ll need the device’s width, which varies across iPhone models. That value comes from this expression:
device.screenWidth
Multiply that value by the page’s scroll percent, and you’ll see the expression outputs a number which will be the progress bar’s width, changing throughout the scroll.

Device Properties

Appearance

device.appearance
Returns the device’s current UI appearance (light, dark).

Clipboard

device.clipboard
Returns the saved value of the device’s clipboard.

Is Landscape

device.isLandscape
Returns a boolean that is true if the device’s orientation is landscape.

Is iPhone

device.isPhone
Returns a boolean that is true if the device is an iPhone.

Is Portrait

device.isPortrait
Returns a boolean that is true if the device’s orientation is portrait.

Keyboard Height

device.keyboardHeight
Returns the height of the device’s native keyboard.

Keyboard Height with Input Accessory

device.keyboardHeightWithInputAccessory
Returns the height of the device’s native keyboard with the input accessory.

Orientation

device.orientation
Returns the device’s current orientation.

Safe Area Bottom

device.safeAreaBottom
Returns the device’s bottom safe area.

Safe Area Top

device.safeAreaTop
Returns the device’s top safe area.

Screen Height

device.screenHeight
Returns the device’s screen height.

Screen Width

device.screenWidth
Returns the device’s screen width.

Tab Bar Height

device.tabBarHeight
Returns the device’s tab bar height.
I