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

What is Framer? Join the Community
Return to index
Mike Johnson
Posted Dec 07 - Read on Facebook

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.

13 Comments

Pedro Laguna da Rosa

Thank you so much for the screencast! Damn, really helped me out here. <3

Jelle Tuinhout

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/ )

Mike Johnson

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.

Callil Capuozzo

Very useful -- thanks mike

Nicolas Elizaga

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:

<script src="framer/framer.modules.js"></script>

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.

Mike Johnson

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.

Nicolas Elizaga

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 : )

Mike Johnson

Nice!

Nicolas Elizaga

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.

Nicolas Elizaga

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.

Mike Johnson

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?

Nicolas Elizaga

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).

Nicolas Elizaga

This is runing in Simulator (only happens when packaged up as a native app unfortunately): http://d.pr/v/15aSH

Read the entire post on Facebook