Framer Tips — Responsive for multiple devices

This article is original written by waychang. This is the english version of it.

The Problem

At the very beginning of prototype making, usually we will select a specific device resolution in Framer. Just like when we doing our design in Sketch, we always start with a preset device resolution to work with.

So let’s select Apple iPhone 6s as our 1x to start with (see below).

Every layer we have constructed is relative to this 750 x 1334 (px) resolution. Lets create a layer call “ui” and has the dimension of 750 x 1334 and give it a border with color red (see below).

Now here comes the problem. When we start to send out Framer Link for user testing, we don’t have the control which device is going be used in those testing.

As you can see, none of the device (iPhone6sPlus, Samsung Notes5, HTC one A9) is filled up with the content we created. Let’s see what you can do to make the content responsive.

The Responsive Way

There are many ways to acheive responsive in Framer. However no matter which methods you choose to implement, its all to do with “Scale & Proportion”

First we have to know our default width and height you chooses to work with. In our case, the width is 750 and the height is 1334. So we delcare these two variables accordingly.

default_w = 750
default_h = 1334

Second thing we have to know is which devices will be used to display this prototype and their resoultion. For instance…

• iPhone6sPlus：1242 x 2208
• Samsung Note5：1440 x 2560
• HTC One A9：1920 x 1080
• … and more

YES. There are lots of them, but dont worry about it, we will use Framer.Device.screen to auto-detects current device’s width and height.

Here is what you have to do.

screen_width = Framer.Device.screen.width 
screen_height = Framer.Device.screen.height

Now, since we have our devices’ width and height, its time to get the ratio between our default size and desired devices. Let’s divide the device width (screen_width) by the our default width (default_w). (you can use height instead of width to get the ratio too. )

ratio = screen_width / default_w

With this ratio. you can simply.

Framer.Device.contentScale = ratio

Now try to switch the devices from the menu, you will see the contents are scaling according to devices.

HOWEVER! When you start to preview your prototypes though Frameless or Frame App on your mobile device, you will realize that the responsive is not really happening there. That’s why we need a master layer / a big container to contain all our layers and we will scale that master layer with the ratio we have got.

all = new Layer
  width: default_w  # <-- The width will be 750 
  height: default_h # <-- The height will be 1334
  scale: ratio      # <-- The ratio we got from the equation
  originY: 0        # <-- This moves the origin of scale to top left
  y: 0              # <-- Make this layer to the top
all.centerX()       # <-- And we center the X position 

Once we have the layer “all”, what we have to do is to parent all our layers into this “all” layer.

content = new Layer
  parent: all

Now your prototype should adjust its dimension according to the devices ! You can try to change the device from the menu to see the effect!

Use force2d to solve layer blurry

Once we scale our layers, you may find them blurry. What we can do is to set the default setting of force2d for each layers equal to true.

Framer.Defaults.Layer.force2d = true

This has to be placed before you declare the “all” layer. Once you have done it, all your layers will be no longer affect by any 3D effects, such as flipping along Y-axis and the property of Z-axis will not work any more. If you really want those effect back, you can set the force2d = false to each individual layers.

Final Results:

YEAH! Now no matter what device you have, its all scaling properly according to our default resolution.

Framer Studio code：

The Limitation of Scale Responsive

This method only works on the device that shares the same ratio (height/width). For example, if your default ratio is 1.778 (1334/750), only can fill up the devices has 1.778 ratio.

1334 / 750 ≒ 1242 / 2208 ≒ 1440 / 2560 ≒ 1920 / 1080 ≒ 1.778

For some reason if we have to choose iPad to preview our prototype, you will realize the bottom will be cut off. This is because 2048 / 1536 ≒ 1.333.

There are ways we can prevent this happen to some of the component. For example Bottom Tab, we can make the max Y of the tab layer always equal to the device height.

tab.maxY = screen_height

Also be aware that this is scaling up the whole content together, not the exact way how android and iOS handle multi devices. But it is enough for user testing purpose.

And last, but not least…

Framer Project: http://share.framerjs.com/6kxw7hu612oi/