Screens

A Screen is a layer that can be drawn on the canvas to help you design for a specific device size.

Framer can be used to prototype any kind of interface, from desktop prototypes to watch screens. As Screen layers are responsive by nature, you can easily resize a Screen according to the interface you want to prototype for.

Drawing a Screen

A Screen can be drawn from the Toolbar or by pressing s. After which, you can drag and click to create a Screen or you can pick from one of the many presets in the panel to the right.

Frames vs Screens

When you draw a Screen on the canvas, it will always be a solid white. This indicates you are working with a Screen and not with a Frame.

While Frames are used for designing interface elements, like buttons and navbars, Screens are used only directly on the canvas and will determine the size of the Preview.

Devices

When you’ve drawn a Screen, you can assign the Screen a Device to ensure that the Screen exactly matches the dimensions of the device you’re prototyping for.

To set or change a Screen’s device, select the Device on the Properties Panel.

Framer offers many default Screen sizes on the right-hand properties panel

Stack Layout

You can automatically position a Screen’s content by enabling its stack layout. A Stack can be drawn as the Stack tool, but in Framer, you can also enable a Frame or Screen to have its stack layout enabled.

To enable the stack layout for a selected Screen, click on the Stack heading in the Properties Panel. Click this heading again to disable the stack layout.

When you enable a Screen’s stack layout, any existing child layers will be positioned automatically according to the Screen’s Stack properties. When you disable a Screen’s stack layout, all of the Screen’schild layers will remain in their stacked positions.

To learn more about the stack layout, see our Stack article.

Enable the Stack layout on a Screen to reap the benefits of Stacks