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

What is Framer? Join the Community
Return to index
Johannes Eckert
Posted Apr 01 - 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/

26 Comments

Markus Smet

Jordan Robert Dobson - I know a bit of coffeescript, am new to Framer. I need early prototypes to adapt across lots of Android sizes, that's what your module does right?

Jordan Robert Dobson

If implemented correctly yes. :)

Markus Smet

Ok thanks (and for the spectacularly quick reply!) I'm assuming Framer still has no built-in way of doing this then?

Jordan Robert Dobson

No... are you using Sketch import or building your layers manually?

Markus Smet

I find it easy to build manually - I only wanted to use Sketch to mock small parts e.g. a drop down menu with 2 states 'open' and 'closed'? Would I be able to set the size of those the same way?

Jordan Robert Dobson

Yep. You should be good then.

Markus Smet

Jordan Robert Dobson - I've just started to use it, so much better than my fudges to get ratios working. Well done and thank you.

Jordan Robert Dobson

Sure thing! It's saved me so much time.

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

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