Framer Classic » Global values » Device settings

Device settings

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.

Device background

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 style properties:

# 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"
Open in Framer

The CSS pattern above was found in Lea Verou’s CSS3 Patterns Gallery.

A CSS styled device background

Content size

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 layer.center(), 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 1.

Making layers persistent

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

Leave a Reply