Skip to main content
Device Properties

Expression Editor values for an iOS device's properties.

Updated over 2 weeks ago

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 an object’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).

Is iPhone

device.isPhone

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

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.

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.

Did this answer your question?