Dimensions

Every layer has a width and height, plus a scale for making the layer bigger or smaller.

The project below shows how dimensions (width, height…) and position (x, y…) relate. Switch to Present ⇧⌘F to get a fullscreen view.

Width, Height, and Size

Framer uses points for layer dimensions and position. (It used to be pixels before the release of Design.)

An iPhone 8 artboard, for example, is 375 by 667 points, but this phone has a @2x High-DPI ‘retina’ screen, so the amount of actual pixels on the device is 750 by 1334 (four pixels for every point).

Other devices have other scaling ratios. An iPhone Plus has a @3x screen, and Android devices might have a 1.5, 1.3, 2.6 or other ‘density.’

The Preview Window devices in which points and pixels are one and the same (@1x) are probably: ‘Canvas’, the computer desktops, and ‘TV.’

Correcting the sizes of images

The width and height properties are set automatically when you drag in an image or video (both in Design and in Code), but they will be in pixels.

So to change the size of an image to e.g. @2x you can:

• In Design: Type /2 after its width or height in the inspector
• In code:
  • Put the layer in edit mode and type /2 after its width and height values in the Properties Panel
  • Just write /2 after its width and height values directly in the code

By the way, when working with a design made in Sketch or Figma, you can pick the desired scaling ratio when importing.

Screen dimensions

You can use Screen.width and Screen.height to give a layer the full width or height of the screen.

statusBar = new Layer
    width: Screen.width
    height: 20
    backgroundColor: "silver"

navigationBar = new Layer
    width: Screen.width
    height: 64
    backgroundColor: "gray"

This status bar and navigation bar will take the width of the screen, for any device resolution, in both portrait and landscape orientations.

Size

Each layer also has a size property. It contains an object with both width and height.

print navigationBar.size
» { width: 375, height: 64 }

Setting this size property will apply the value to both the width and height.

circle = new Layer
    size: 200
    borderRadius: "50%"

print circle.size
» { width: 200, height: 200 }

You can also use one layer’s size to set it on a different layer. Like here, where the Screen’s dimensions are used to make a PageComponent) full-screen:

page = new PageComponent
    size: Screen.size

Scale

To make a layer bigger or smaller afterward (e.g., in an animation) you can use scale.

The default scale of a layer is 1, so 0.5 will make it half the original size while 2 will double it.

Remember how we animated the scale of the orange circle in Animation basics?

orangeCircle.animate
    opacity: 0.00
    scale: 6.00
    options:
        time: 1
        curve: "ease"

Changing a layer’s scale will make it grow or shrink from its center because that’s the default ‘transform origin,’ but you can change that to be any other point in the layer.

Scale takes the current resolution of the layer and just ‘blows it up’ quickly on the GPU (the graphics card). If you notice artifacts because of scaling up too big, you can try animating width and height instead (if the image is resolution independent). Or you can use a bigger image and scale it down, like one twice the size with an initial scale of 0.5.

Next to the scale property, there are also scaleX and scaleY, for resizing a layer only horizontally or vertically.