Here's a quick screencast showing the process of exporting a Framer studio project to an ipa file that can be installed on other peoples' devices through Cordova.
Thank you so much for the screencast! Damn, really helped me out here. <3
Mike Johnson I am trying to use your awesome method to port an app to cordova. But the trick to convert from coffee script to js doesn't work anymore when I design the screens in the 'design tab'. It doesn't recognise the Layers I made there in JS... Any idea how to work around? If I generate the layers in code, it still works like a charm but would like to use the awesome design functionalities in the new versions... Any ideas ? (simple example: https://framer.cloud/WlCWG/ )
Also quick note, to get fix scaling issues you may have to edit the config.xml file
<preference name="EnableViewportScale" value="true" />
This defaults to false every time cordova run is called. Editing to true after running `cordova build` and before opening in xcode will fix most scale issues.
Very useful -- thanks mike
Thanks for this! Your walkthrough helped me get Framer's "Welcome" examples running through Xcode =)
After some trial and error, I was also able to get a prototype running with modules by leaving this in index.html:
This would be a perfect case for a helper build script: copy Framer files to deploy/www, modify index.html, compile all coffeescript to JS, run "cordova build", profit.
Yeah, the modules file is required if you are adding any modules, I wanted to show the bare minimum to getting it up and running.
I wanted to get this working for a current project, so I threw together this build script so Gulp would do all the work for me: https://gist.github.com/hellonicolas/07817fe3d467b33c237b
For the most part it's fairly similar to the first part of your tutorial video, but then Gulp takes over copying files / updating the Cordova build / converting Coffeescript to JS / etc.
So far it's worked without any issues on a fairly complex existing Framer project (other than Xcode being an occasional pain in the ass).
Hopefully someone finds that useful : )
Hey Mike, have you run into any issues in the last few days (possibly related to Framer.js updates) with a Cordova project scrolling out of view whenever you touch & drag?
FYI, I've been using this setting to prevent overscrolling:<preference name="DisallowOverscroll" value="true"/>
My imported Sketch files doesn't have artboards but has a lot of different groups laid out for different views so it looks like it's scrolling around in those bounds, but I'm baffled as to why that's happening all of a sudden.
Unfortunately turns out it's something in the latest Framer.js update – reverting back fixes it. I'll post a screencap of the behavior shortly.
I haven't pushed any builds for a while, so I haven't seen this. :( Where are you seting the DisallowOverscroll? In the config xml?
Yep, adding that to config.xml. This new behavior scrolls outside the bounds of the device if you have any off-screen assets imported (ScrollComponents, etc).
This is runing in Simulator (only happens when packaged up as a native app unfortunately): http://d.pr/v/15aSH