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

What is Framer? Join the Community
Return to index
Jordan Robert Dobson
Posted Aug 16 - Read on Facebook

MODULE: Device Pixel Ratio


The latest code can now be found on GitHub:

Demo & Module Post:

I never managed to post my first version of this module to and after using it myself for a while and watching Lauren use it at work I've changed a few things.

I tend to have the need to prototype for various devices and pixel densities at Microsoft. You never know what type of device someone will have there. I like to build my prototypes to be fluid and adaptable to the device.

This module assists you in building prototypes @ 1x and adjusts the prototype using the Device Pixel Ratio of any device for values where you use the dpr() function in the module.

This allows you to build fluid and adaptable prototypes in combination with the Screen.width & Screen.height values in Framer.

Here’s a quick usage example for the same sizing in Framer and on any device:

 {dpr} = require “DevicePixelRatio”

 rect = new Layer
  width: dpr 300
  height: dpr 50

This will make sure it's 300x50 @1x, 450x75 @1.5x, 600x100 @2x, 900x150 @3x, and so on... It will even give you the correct values in FramerStudio for any device regardless if you use retina or not. :D

Framer Studio Usage Demo:

Module Code:

I hope this helps you on your prototypes. It's definitely helped me!

Happy Holidays!



Emin İnanç Ünlü

Hey Jordan Robert Dobson that's a great module thanks! But I wonder why you didn't use window.devicePixelRatio to detect the density instead of using device names, isn't it consistent across all the browsers and devices? In this way there wouldn't be need to update the device names.

Jon Madison

you should update this again. :)

Nikolay Berezovskiy

Awesome! Thanks man.

Jordan Robert Dobson

You're very welcome!

Jordan Robert Dobson

Thanks to Nikolay Berezovskiy for helping me with the device name and resolution updates to this module.

It now has a repo which you can find on GitHub:

Mike Hughes

Wow, so cool. What a day, major new Framer release and now this !

German Bauer

Looking through the code, I did not know you mix in code like this:
font: "400 #{dpr 14}px/#{dpr 42}px -apple-system, Helvetica Neue
#breakthrough #needmorecoffee

Andy Jakubowski

That’s exactly what I need for my new prototype. Thanks a lot for sharing Jordan!

Jacopo Moretto

Does it work with import from sketch? :)

Jordan Robert Dobson

Jacopo Moretto - theoretically yes. But you'd have to apply it yourself by looping your layers.

Ee Venn Soh

Jordan Robert Dobson If I import my sketch design files into Framer, do I import at 1x, 2x or 3x? I notice this plugin works for layers created in code but for imported images I still need to import at the correct resolution? Eg: If my device is at @3x and I try to import Sketch at 1x and use contentScale to bump it up to 3x it will screw up the view of the rest of the layers too.

Can't we import sketch layers at @1x and code everything at @1x and use contentScale to bump up to the respective device ratio?

Jon Madison

^^^The Real MVP

Jon Madison


Jordan Robert Dobson

Consider it MIT. I just have to actually do that.

Guillermo Romero Jr

Is there a way I can add more devices myself? I'm trying to test on a Nexus 6P that's running at 2550 x 1440 and this module isn't scaling my prototype to full screen

Read the entire post on Facebook