Framer.Device emulates a device in the Preview Window. Its principal properties like, e.g., which device, rotation, and zoom can be set in the Preview Window itself.
Other properties can be set by code. The details are in the Framer Classic docs, but I’ll mention the most useful ones here.
The canvas behind the device image is a layer:
Framer.Device.background. By default it’s white, but you can change its properties like those of any other layer.
Changing the default white to something flashier:
# setting the device background to a color Framer.Device.background.backgroundColor = "Lime"
Or using CSS
# setting the device background to a CSS style Framer.Device.background.style = background: "linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px), linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px" backgroundColor: "#708090" backgroundSize: "64px 128px"
The CSS pattern above was found in Lea Verou’s CSS3 Patterns Gallery.
Assets at only 1x resolution have to be scaled up separately for a retina prototype. A quick solution to this can be to resize all the assets at once by doubling the content scale of the project.
# Scale all content to 200% Framer.Device.contentScale = 2
This also works the other way around, when assets are too big for the chosen device.
# Scale all content by 50% Framer.Device.contentScale = 0.5
Note that functions like
centerX(), etc. will not work correctly when the Content Scale is higher than
1. There doesn’t seem to be a problem with values under
The device object has another interesting use: any layer you add to its
Framer.Device.Screen will be on top of all other layers, and thus always visible. Perfect for status bars.
# Make the status bar a persistent layer statusBar.parent = Framer.Device.Screen