Fit Sketch Artboards on Every device in Framer.js

Question

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 Framer. Right now it only fits on iPhone 5 resolution. 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). enter image description here

score 5 · Answer 1 · answered Jun 15 '15 at 08:32

5

I use this to scale my Sketch artboards to fit Framer's device

artboardWidth = 640
Framer.Device.contentScale = (Screen.width / artboardWidth)

answered Jun 15 '15 at 08:32

simonki

53
3

This worked for me! Thanks! Still doesn't show up right in the framer app on Android tho :/ – Aaron Storck Sep 20 '15 at 18:01
works beautifully on desktop! not so much on my iOS device. – Jon Madison Jul 22 '16 at 15:50

score -1 · Answer 2 · answered Jun 12 '15 at 09:57

-1

I had this issue, removing the sketch artboard solved it for me...

answered Jun 12 '15 at 09:57

jimbo

1,018
4
18
34

Fit Sketch Artboards on Every device in Framer.js

2 Answers2