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

What is Framer? Join the Community
Return to index
Evan Knight
Posted Jun 09 - Read on Facebook

I have a prototype built, imported from Sketch with multiple artboards that are 640x1136. But I would like it to fit on all devices when I run it in Frameless. Right now it only fits on 5's. What do I need to do in order for the prototype to work on all devices?

I tried making each artboard larger, with the content centered, and then ran Framer.Device.fullScreen = true, but the proportions are still off. Is there a way to use percentages rather than static pixel positions so the views will fit in each device accordingly?

Attached is screenshot of what it looks like on 6+ (don't fit), and what it looks like on a 5 (fits).



Evan Knight

Update: I can get it working on each device in Framer using
if Framer.Device.screen.width > 750
Framer.Device.contentScale = 1
else if Framer.Device.screen.width == 750
Framer.Device.contentScale = 0.595
else if Framer.Device.screen.width == 640
Framer.Device.contentScale = 0.5

but doesn't work once I open in Framless on a iPhone 6+ :(

Chris Camargo

Sounds like previewing on 6+ is a bag of hurt at the moment:

Evan Knight

This is my exact problem. Framer.Device.setContentScale works in Framer studio, but not on the actual device.

Evan Knight

Got it working: In sketch I scaled my artboards to 6+ size, then used Framer.Device.setContentScale to get the size of each device and scaled down accordingly using the if statement in my comment above - since setContentScale only works in a 0-1 range.

Abhishek Nandakumar

Shouldn't something like Framer.Device.contentScale = Screen.width/sketchImportedLayers["rootLayerName"].width work?

Evan Knight

Looks like that is working, thanks!

Bruce Vang

Any new update on this? If I'm designing for Android and iOS, should I be creating my prototypes at the largest device?

Chris Camargo

Bruce Vang: if you're building assets in Sketch, build for the largest device you plan on testing with.

Read the entire post on Facebook