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

What is Framer? Join the Community
Return to index
Rory Smyth
Posted Sep 03 - Read on Facebook

Guys, is there any future plan to support sketch files that are created in 1x but need to be viewable at a higher resolution?

Like for the nexus5. Working at 1x but importing the assets at 3x

40 Comments

Sean Mateer

I have found Sketch's 'Scale' feature to be super useful. If you select all of your artboards, you can scale up and down by percentage at any time. It shouldn't effect your workflow at all. You can scale up to 3x while working in Framer and scale back down to 1x before exporting assets for production. Hopefully that helps!

Rory Smyth

Thanks for the suggestion but it's a bit hacky in my mind. If you're rapidly iterating over designs -> prototype, you're constantly scaling up & down. If you're referencing sizes from 1x prototypes, you need to change their values etc etc. This is the issue i'm referring to.

Sean Mateer

Ah, yes. I could see the issue in that font sizes, etc would be problematic and a pain to keep track of. Perhaps someone else knows of a solution, or Framer will have one soon.

Benny Chew

I highly agree @Rory Smyth. Framer should work resolution independent, so when you are animating you can reference 1x values. It will also be more compatible with Xcode for example, Xcode works with points, so you will always be working in 1x in there.

Jordan Robert Dobson

That's not really realistic Benny. How would framer know which values it should translate and which ones it shouldn't?

Ed Lea

You can set individual layer groups to export @3x in sketch then drag them from the layers panel directly into sketch. It doesn't give you the complete layout like the importer, but once you're set up it saves you doing the scale route.

Chad Lonberger

Hmm.. Unless I'm misunderstanding, doesn't seem too hard to simply load @1x,@2x, etc assets dynamically based on Screen.size...? (Disclaimer: not had my coffee yet)

Jordan Robert Dobson

Who's screen size? The device(2x or 3x or even 1.5x) or your computer screen (1x or 2x)?

Rory Smyth

Jordan Robert Dobson if I'm on a nexus 5. at 1x im designin for 320x640. If I view this on the device or on the "emulator", it should load a 320x640 container with 1080x1920 assets scaled down (background-image?). This way the assets retain the crispness but we're actually working with 1x dimensions, co-ords etc

Jordan Robert Dobson

But it's still rendered in the browser at normal pixel values. It's just scaled. That's how a browser works. :(

Rory Smyth

Only if it's a non retina screen Jordan Robert Dobson. If you use a larger image than a divs dimensions and set it as a background image on a retina device (as most phones and macbooks are), it'll "squeeze" the pixels into place.

Benny Chew

If you look at other prototyping solutions like Pixate, Principle and Flinto. They all work at 1x (points instead of pixels, relative instead of absolute). So if you import let's say Menu@2x.png it will automatically scale it down at 1x just like Rory explained, and this is the great thing about it. It will be much easier and realistic to work with if you can enter values at 1x, so animating your screen out of the screen will be 375 (on iPhone 6) and not 700. Who knows maybe you want to hand over your prototype to an iOS developer. Xcode works with points at 1x, so the animation values will be correct. Won't need to do the 700 / 2 math.

Jordan Robert Dobson

Rory Smyth - I'm aware. Been working on front end since late 90s. But we're talking about JavaScript values here.

Jordan Robert Dobson

I don't use Pixate, Principle or Flinto... But do they render via a web browser or is it native?

Jordan Robert Dobson

Rory Smyth - I use a 27" cinema... And a MacBook Pro... And clients use a variety of devices to preview designs.

I also work in Objc and Swift writing apps... So I get the pts benefits... But you typically design with constraints instead of straight pixel dimensions so that your layouts adapt to the device.

I understand the value... I'm just not sure the translation would work how you expect across 1x to 3x devices.

Benny Chew

Jordan Robert Dobson They are all native so far I know off. You need a native app to view the prototypes or with the simulator. Perhaps this is different about Framer, since Framer can render in the browser (which is an advantage of course). I'm not sure how easy or hard it is to implement the 'points system' in Framer, but I'm confident it is possible. One day we will have a 4x device, then it would be very troublesome to work with absolute pixel values.

Jordan Robert Dobson

Oh it's possible. It's just not something that is even close to simple or important IMO. It would be great if it was abstracted away eventually.

Trust me I know the pain... Here's me testing grid structures in Framer and CSS

Jordan Robert Dobson

Rory Smyth

Jordan Robert Dobson If I take a 320px layer and scale it up 300%, it'll fit the device and and all the co-ordinates are respected. The only downside is framers divs reference the 320px wide images. What we need is a way to declare that we're working at 1x and that the background images should reference the higher resolution images instead.

Rory Smyth

It's most definitely important. If you're working on mobile apps. Not so much for websites.

Rory Smyth
Jordan Robert Dobson

Rory Smyth - that's if you use images. What if you want dynamic text and have to set the font size?

It's not all about importing images as background layers at 100% 100%.

Jordan Robert Dobson

It's probably important to you... But in the grand scheme of things. I highly suspect it's far from the top of the list of priorities.

I could see something like this coming along if there were more GUI features as you'd have to do that translation into JavaScript anyways so that's the perfect place to do it.

Messing with things in this way however starts to stifle the power and ability of things you can do / add on to framer with external libraries... Etc that most definitely won't do the that translation for you.

Rory Smyth

Yeah, that's something that would need to be tackled. And I'm not the one with the answers. I'm putting this out there to the guys who might.

Jordan Robert Dobson

That said... I do some of what you're talking about with a status bar module that I use across devices. I just want to include the module, ask for it, and have it work... It looks at the devicePixelResolution and multiplies that value times the 20px height of the status bar.

But still things like animating in and out of view I still need to use the actual height of 20px 40px or 60px as that's what JavaScript uses. Or I have to write a method that handles all that for me.

Jordan Robert Dobson

Sure. I'm trying to give you some answers and explain the challenges.

One method I've been using recently is to store a variable like

dpr = window.devicePixelRatio

Then as I go through and set the dimensions on things... I use the variable like so...

rect = new Layer width: 100*dpr, height: 33*dpr, maxY: Screen.height, x:8*dpr

That makes the positioning consistent across resolutions without locking to a specific resolution.

Rory Smyth

looks like somebody made a start on it a while ago, but didn't follow up https://github.com/koenbok/Framer/pull/228. Interesting

Jordan Robert Dobson

Pete Schaffner what ever happened here?

Pete Schaffner

Wow, this is quite a thread :) I haven't read through everything you guys have been discussing, but making framer studio work with relative points is def doable and the work in that PR is close to getting it there. I've been busy lately and haven't been able to push it the remaining 10% it probably needs to be merged. I will update the PR soon and post here with some more thoughts on this subject.

Rory Smyth

Nice work pete

Benny Chew

Great stuff Pete, looks very interesting!

Jordan Robert Dobson

Pete Schaffner - so does it handle animating say 50 pixels to the right on any device and will move the appropriate amount. Or are you approaching this from the met tag scaling angle?

Jordan Robert Dobson

The last 10% is always the hardest part. You think it will actually get merged in?

Pete Schaffner

Jordan: yep what you described will work. Scaling via the meta tag is one part of the puzzle for previewing on device/simulator, but for viewing in FS the meta tag changes don't apply

Pete Schaffner

Haha yea I hear ya about the last 10%, but I'm confident that between the work in this PR and with maybe a little work on Studio, this will get merged and our lives will be greatly improved :)

Rory Smyth

Pete Schaffner that would be amazing. Btw, what sort of adjustments do you need to make to the sketch file?

Jordan Robert Dobson

That's great. I'll have to dig in more. I've worked in and around this area for a while... And started defining grid systems with base unit modified by devicePixelResolution... So I would be happy to provide feedback if/when you need it.

Pete Schaffner

Jordan: Awesome! Yea I'm in the same boat with a handful of goto workarounds. I will def keep you updated.

Pete Schaffner

Rory: not many. Just set the appropriate export rules to your layer groups and framer will scale them appropriately when it imports from Sketch (see the sketch file in this example project: http://share.framerjs.com/qxva760srau4/). Ultimately I would like to put in some work on the sketch importer plugin that could handle scaling more intelligently (ie automatically).

Rory Smyth

I was looking at the sketch api. If we could create a simple plugin that would go through each layer and set the export size, that'd be awesome. Can't find anything in the docs though. Not sure they expose that. Shame

Read the entire post on Facebook