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
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!
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.
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.
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.
That's not really realistic Benny. How would framer know which values it should translate and which ones it shouldn't?
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.
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)
Who's screen size? The device(2x or 3x or even 1.5x) or your computer screen (1x or 2x)?
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
But it's still rendered in the browser at normal pixel values. It's just scaled. That's how a browser works. :(
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.
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.
I don't use Pixate, Principle or Flinto... But do they render via a web browser or is it native?
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.
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.
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 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.
It's most definitely important. If you're working on mobile apps. Not so much for websites.
I'm not alone here either https://www.facebook.com/groups/framerjs/search/?query=1x
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%.
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.
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.
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.
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.
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.
looks like somebody made a start on it a while ago, but didn't follow up https://github.com/koenbok/Framer/pull/228. Interesting
Pete Schaffner what ever happened here?
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.
Nice work pete
Great stuff Pete, looks very interesting!
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?
The last 10% is always the hardest part. You think it will actually get merged in?
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
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 :)
Pete Schaffner that would be amazing. Btw, what sort of adjustments do you need to make to the sketch file?
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.
Jordan: Awesome! Yea I'm in the same boat with a handful of goto workarounds. I will def keep you updated.
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).
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