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

What is Framer? Join the Community
Return to index
Johannes Eckert
Posted Feb 05 - Read on Facebook

Call me crazy but I do like to design everything at @1x. that's what feels most natural to me and produces output that the engineers can take as input directly.

I am struggling setting up my framer prototypes this way. if I set Device.contentScale, it works OK when a device frame is present, but layer.center() does not seem to respect the scale factor.
When viewed on a device, Framer.Device isn't around and then the meta viewport scaling does seem to be responsible for scaling.

Is there a good few-lines-of-code solution for this without doing a custom device or manually changing the meta viewport?

http://share.framerjs.com/lrvq10uiv0mx/

19 Comments

Johannes Eckert

brings me to a general question: even if there isn't a device frame visible when viewing the prototype on the device, the relative bounds the prototype was *designed for* are still relevant.

what if the prototype is always fit into the displaying device, so for example (potentially with pillar/letterboxing), so a prototype designed for the iPhone 6 will display just slightly larger or smaller on the iPhone 5 and 6 plus, but without any unused space around it

Koen Bok

Hmm this shouldn't be too hard to fix in the DeviceView, but I'm working on some other (cool) stuff right now. Poke around to see how far you can get, and I'll take over when you get stuck ok?

Johannes Eckert

is the deviceview still present when the prototype is viewed on a mobile device?

Koen Bok

Yes, but it doesn't draw anything other than content and viewport.

Peter Hilgersom

Isn't your design blurry when you set contentscale to 2?

Pete Schaffner

Just submitted a PR to give us proper support for @1x designing. This should fix the on-device and centering issues you mentioned Johannes Eckert.

https://github.com/koenbok/Framer/pull/228

Rory Smyth

I design at 1x too. So i have to take all my designs and scale them up for Framer. Content scaling is great, but what would be amazing is if the content is scaling up 2x, then it would use 2x assets from Sketch. This way we could design and prototype at 1x without the downside of the blurriness.

Pete Schaffner

Rory Smyth: yeah, it would be cool to write scale-independent `Layer#image` paths (i.e. `myLayer.image = 'images/image.png'`) and have FS load the @<scale>x variant based on the `Framer.Device.contentScale` property.

Pete Schaffner

Rory Smyth There shouldn't be any "blurriness" problems with the change I've proposed (see the linked example using the updated version of Framer.js). As long as you add the appropriate scaling export rules to your Sketch layer groups and declare a corresponding `Framer.Device.contentScale` in your prototype, everything should be groovy and your designs will look pixel perfect on device and while viewing at "contentScale / 2" zoom in FS. Then, you can write all your layout code in relative points without having to mess with multiplier variables/functions or any other funky stuff.

Pete Schaffner

forgot to link to the example: http://share.framerjs.com/izqfm11qf5n4/

Johannes Eckert

That's a clever solution. Albeit a bit annoying to do this for all your layer groups, and as far as I know doesn't work for arboards.

The issue I was trying to solve was also to scale the prototype into view, on devices with slightly different aspect ratios/viewports (like pixate does with some slight letterboxing/pillarboxing)

Johannes Eckert

Pete Schaffner

I don't export from Sketch often, so it wasn't top-of-mind for me. To automate the @<scale>x exporting would probably require some work in the Sketch plugin. I might look into that in a separate PR. As for the pixate letterboxing, that seems like something worth approaching in another issue/PR too.

Jordan Robert Dobson
Nefaur Khandker

Resurfacing this thread from 2015. I noticed that https://github.com/koenbok/Framer/pull/228 was closed without changes being merged. Pete Schaffner, Koen Bok: Was there another solution/approach that worked better, or is this pull request just something that never became high enough priority to finish and merge?

Koen Bok

It kind of stalled a bit, I wanted to do some housekeeping, and we addressed the biggest issue: Sketch import. We might revise this in the future but 1x/2x adds a lot of complexity that not everyone might need, and it's pretty easy to pass all your values through a function that divides by 2 if you really need it (there are some examples in this group).

Koen Bok

That said, elegant ideas are always welcome.

Nefaur Khandker

Thanks for the context!

Jordan Robert Dobson

Nefaur Khandker My DPR module is working excellent for me still.

Read the entire post on Facebook