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

What is Framer? Join the Community
Return to index
Shane Brown
Posted Nov 03 - Read on Facebook

Is it possible to get the Framer prototype to adjust its width and height to better match the device it is being viewed on? For instance, the prototype I have is designed for the iPhone 5, which means viewing it on my HTC One allows it to see the entire surface (including layers normally hidden to the side) which looks bad, and the same for my iPad. So either, am I able to have it match the width / height (to some degree) while maintaining the same ratio OR can I have it center and hide the outside layers (as it does on the desktop and in framer with the iPhone container)?

12 Comments

Koen Bok

You can define your own custom device like this: https://gist.github.com/koenbok/45c2ddbde0f5b4f6a960

Edward Sanchez

Koen I think he meant as in responsive design where the design adjusts itself depending on phone, like auto-layout.

Shane Brown

Yeh, that's what I was after Edward. I've been busy so I've only taken a quick look and thought what Koen suggested was it, but it looks like its to replicate the viewer rather than adjusting the prototype presentation based on device.

Guus Baggermans

You can get the screen's height and width in the beginning of your code, and relate the size of your items to that. I haven't found a clean way of accessing this size, but if you get the height and width of a BackgroundLayer you are good to go ;)

Andreas Wahlström

It's a bit long, but you can always base stuff on: Framer.Device.screen.width and Framer.Device.screen.height

Metin Saray

But aren't all assets are bitmaps on Framer? I see some people drawing shapes and resizing stuff. I'm not there yet, but if it's based on bitmap, i don't know how it's going to resize.

Guus Baggermans

Any asset you import is created as a Layer. The bitmap is just one property of this layer. You can translate/rotate/scale/mask this layer to your liking

Metin Saray

yes but aren't they PNGs? Does it support shapes?

Guus Baggermans

A Layer supports CSS transforms as far as I know, and you can use a PNG mask if you want a funkier shape.

Metin Saray

Thanks, i guess i'll see it in practice as i explore further (: was just guessing

Koen Bok

Yeah sorry I read too fast. For a design that scales for different designs you want to make one (or more) functions that can calculate sizes/positions based on the current screen size. Myself, I often create a setup function to build views and set styling, and then a update function to set positioning and sizes. Then I just call the update function on a device change or screen resize.

Dean Broadley

Hi Koen, I do something similar. I do a check to get the device width and set it to a variable and then position and size according to that variable. That works great in Framer Studio and Previewing in browser, but I've noticed if you "Home Screen" the app, the positioning gets wonky...any idea why that would happen?

Read the entire post on Facebook