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

What is Framer? Join the Community
Return to index
Alexander Zapadenko
Posted Apr 12 - Read on Facebook

Hey guys, i'm trying to deal with prototype which will be ready for multiple screens. For example, i have a sketch file for android application in mdpi, the goal is to be able to view the prototype on multiple devices (hdpi, xhdpi etc.). Fluid-framer giving ability to set auto-width but i can't find a way to scale height proportionally based on auto-width result.

Maybe there is other workaround based on dp units, but still, no any idea where to dig to find it.

Thanks for any help.


Jordan Robert Dobson

If you know the width and height of the original, write something to get the aspect ratio for each layer and store it as a property for the layer. So then if you know the width you can calculate the height.

Josef Richter

of you figure out how to treat assets at various pixel densities, please share your solution :-)

Alexander Zapadenko

Thanks guys, I'm seeing that this field is terra-incognito for everybody, so I will keep you updated on any positive results.

Jordan Robert Dobson

Like for 16:9 is 0.5625 of the width for the height. So determine that for each layer and store it on your layer.

myLayer.myAspectRatio = (myLayer.height / myLayer.width)

Then later on...

myLayer.width = Screen.width
myLayer.height = myLayer.width * myLayer.myAspectRatio


Alexander Zapadenko

Jordan Robert Dobson, thanks man, but if we are talking about something complex - this layer by layer management will add a lot of code to the prototype. I will try to look for a more holistic solution.

Anyway you mention this thing:
myLayer.height = myLayer.width * myLayer.myAspectRatio

I'm thinking what if i will create a super layer which will contain all the stuff on the screen. For elements i will use fluid widths and height form original design. At the end this super layer can be scaled based on the proportion.


Jordan Robert Dobson

Not really too complex. Sounds about the only way to manage it once for all devices. I assume you're managing all your layers anyway. If your devices have varying widths I'm not sure how else you would do it. It might mean you need a function of 2-3 lines of code and an extra line of code for every layer. That shouldn't hurt your performance or prototype at all.

Alexander Zapadenko

Okay, i will play around with it let's see how it will end.

Read the entire post on Facebook