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.