Creating responsive designs

Whenever you are prototyping in Framer, you can design your prototype for any screen size just by changing the dimensions of your canvas-level frame. The canvas-level frame is the first frame you place on the canvas, in which you design the rest of your prototype.

Framer can also be used to create responsive designs, which automatically adjust to changes in the size of your viewport.

The viewport is the space in which your prototype actually shows — this can be Framer’s built-in Preview, the device component, but also your actual (mobile) device you may use to check out your project.

What happens if my prototype is not set up to be responsive?

Let’s say we design our prototype in a frame with the dimensions of an iPhone 11 Pro. If we now preview our prototype on a Google Pixel 4, and your prototype is not set to responsive, your Pixel phone will scale the entire prototype up or down, so that it fits either the height or width of the Pixel’s screen.

If the aspect ratio (the ratio of width to height) of the frame you designed with doesn’t match the aspect ratio of your previewing device, you will see empty white space either to the sides or at the bottom and top.

There are two ways to avoid this from happening:

  1. Designing your prototype in the exact same size as your device
  2. Making your design responsive

Note: When previewing a prototype in a mobile browser, you may still see white space around the prototype even if you designed for the same dimensions as your previewing device. This is due to the browser’s address and navigation bar taking up available space on your screen. Use the mobile Framer apps to preview your prototype in full screen.

Enabling a responsive prototype

To make your prototype preview responsively, you’ll first need to enable responsiveness in the Preview:

  1. Open the Preview
  2. Toggle the menu by clicking the top-left button
  3. Enable the Responsive setting

As explained before, having a responsive prototype means everything in your prototype adjusts to changes in the viewport. Therefore in the preview, your canvas level frame gets resized to the size of the Preview window. This behavior is adopted by the screen of any (mobile) device you may preview with, as this is just another type of viewport or preview.

Since the dimensions of your prototype become dynamic with Responsive previewing enabled, Framer needs to know where a layer should be (or stay) when the dimensions of its parent change. This can be done by setting layout constraints and strategically pinning these.

Layout constraints and pinning

Each element placed within a frame will always have a position relative to its parent frame, also known as its layout constraint.

By pinning constraints, you lock them in place and essentially tell Framer that an element should always be positioned a certain way, whatever happens.

Setting layout constraints

Whenever the layer is selected, constraints of a layer within a frame can be set with the four input fields at the top of the properties panel.

They are used to define the distance between the layer and the parent’s layer’s edge.

For example, setting the L constraint to 24px will position your layer 24 pixels from the left edge of the parent layer. You can also do this by simply dragging around the layer, and the constraints will automatically be calculated.

Locking constraints with pinning

By pinning any of the four constraints, you are selectively locking its position. Pinning the L constraint at 24px will keep this element fixed at 24px from the left of its parent.

No matter how much you now resize the parent layer or the preview, it will always stay at this L position.

Pinning can be done by toggling the grey/blue pin next to the constraint. A blue pin means the constraint is pinned, while grey means it is not. Hover over the center of the constraints interface to see a simulation of how this layer would behave when the parent or preview gets resized.

By pinning elements to certain constraints at the top, right, bottom, or left of its parent, you are now able to fully control how an element should reposition if the parent or preview changes in size.

Note: Any element you place within a frame is automatically pinned by Framer depending on where you placed it. While this is often correct, it may not be what you need for every design.