This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Gregory J. Orton
Posted Dec 07 - Read on Facebook

Hi, Frameristas!

I'm trying to reset all my workflows and prototyping to get to grips with 'designing @1x', so I have a few general design questions and also specific framer questions.

After playing with Jordan Robert Dobson's fantastic DPR module (https://github.com/jordandobson/framer-DevicePixelRatio) I realised that (and this is not to denigrate its usefulness) that the module is essentially just multiplying by a scalar whatever size you set your widths, heights and fonts to, based on the device pixel ratio (DPR) of the device. So I did some reading and I think I understand the concepts, but I need confirmation of my understanding:

1st Question (GENERAL DESIGN):
To 'design @1x' means to design at the DP setting of the device. That is, even if using pixels (photoshop) instead of points (sketch) then find whatever those DP values are, make your canvas that size, and design all your elements to that canvas:

So for example:

iPhone 6: 375 * 667
Google Pixel: 411 * 731

If I export at this size (straight export from PS/AI) or export @1x (from sketch), these items will literally be this pixel height and width, but would look half-sized on the actual device.

I can then use these resources:
http://stackoverflow.com/questions/30049544/what-should-image-sizes-at-1x-2x-and-3x

and

https://material.io/devices/

to find out the "DPR value" of the device that I'm exporting to, and multiply all of my heights, widths and fonts sizes by this value, then export an asset '@x.x' size, I will get the correct asset for the screen size.

Worked example:

From https://material.io/devices/ I can see that a Google Pixel is 16:9, 2.6 xxhdp.

So, I should be able to use it's "DP" value: 411 * 731 for the canvas, multiply that by 2.6 and get the right value in PIXELS for my assets.

Right?

It's wrong!

Width: 411 * 2.6 = ~1068
Height: 731 * 2.6 = ~1900

That's a screen res of 1068 x 1900, missing 12 pixels in the width, and a whopping 20 missing in the height!

2nd question (framer specific):

Experimenting in Framer, I was able to get this, which finally gives me an accurate result:

fullscreen = new Layer
parent: initialView
height: 2.62654 * 731
width: 2.62654 * 411

Resulting layer = 1920 x 1080

I had to use a DPR factor of 2.62654 to get accurate @2.6x on the google pixel device!

When we do this on an iPhone - 375*667, it gives you the correct pixel size!

375 x 667 @ 2x = 750 x 1334. So what gives?

Look at the attached framer project, and you'll see that if you use the guideline @2.6x DPR for the Pixel, you'll get a layer that wont' fit!

Help!

http://share.framerjs.com/lu1f4na3vqoh/

3 Comments

Jordan Robert Dobson

If you print out a dpr value on the pixel what do you get?

print dpr(1)

Jordan Robert Dobson

Some phones for simplicity's sake upscale for you to allow for a certain size "screen" but its denseness is actually a bit more.

Sander Värv

Sketch units are also pixels, not points

Read the entire post on Facebook