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 Oct 14 - Read on Facebook

MODULE: Device Pixel Ratio

Updated @:

Demo + Code:

I typically prototype across various devices with various screen densities. I do this because at Microsoft it's hard to know what type of a device someone will have when viewing my Prototypes. I also like to keep my base units and sizes at 1x to keep things simple. I needed a tool to help me do this...

So, I created a module to help me convert values I use when creating UI elements to a value based off of the DevicePixelRatio to ensure the layout is consistent across devices. It helps to keep a UI consistent regardless if you're viewing in Framer Studio, in a browser, and on a 1x, 2x, or 3x device.

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

If anyone finds any issues or irregularities, let me know right away and I'll get it fixed up.




Jordan Robert Dobson so we can use your module to automatically scale our layers based on the dimension of the device?

Fran Pérez

This is AWESOME. Thanks a lot Jordan :)

Fran Pérez

BTW I think this is something Framer should do natively. Like you work at 1x, and everything is recalculated based on device density :)

Pete Schaffner

Jordan: not dead, but stagnated. I'm on a work trip ATM but plan on carving out some time to revive it once I return ;)

Marc Krenn

Lovely idea, but unfortunately not as convenient as I'd like it to be ;) However, can't wait to see where it goes from here. Prototyping for all sorts of Android phones is kinda nasty right now.

(btw looking at your module's code, Jordan, makes me feel like Neo observing the Matrix encoded for the first time: I admire its elegance, yet, it's way beyond my comprehension, ha!)

Jordan Robert Dobson
Jon Madison

T.T THIS IS THE BEST THING THAT HAS HAPPENED TO ME ALL DAY finally got some vertical alignment across platforms. dying here

Read the entire post on Facebook