UPDATE: Our recently released Framer Studio solves most of the mentioned downsides below. See: http://framerjs.com

Framer creator here.

The most important difference between Framer and QC is that Framer uses code (javascript) and QC visual programming (patches and noodles). They are very different approaches to define flexible behavior and you should figure out what clicks with you.

If you are just interested in the practical differences, these are the ones I think are key (some of them might be solved/outdated).

• QC has immediate visual feedback. You can get close with Framer by using auto refresh on save (for example with Cactus) but it's not the same.

• QC has better performance in cases where it needs to do heavy computing for each frame (obj-c is faster then Javascript) but generally they are pretty close because the both use the same graphics acceleration.

• QC has a nice set of tools built by Facebook to specifically do UI stuff.

• QC is more extendable if you can code objective-c because it doesn't depend on the browser.

• QC's visual programming is more "forgiving". One typo can break your javascript, QC doesn't have that, there is always some result.

• Framer is very nicely integrated with Photoshop.

• Framers' coordinate and event system is a lot easier (positioning or handling clicks).

• Framer works great on mobile devices (including Android although less smooth)

• Because Framer uses the browser you can re-use things you know like css and html, easily use live data and mix in other javascript things you like.

• Framer is modeled after AppKit/UIKit so is closer to what the actual implementation will be.

Let me know if I missed anything.

Apples & Oranges. Use both and more. One tool isn't the ideal solution.

Today I just did my first Quartz Composer prototype using Origami and if you do not know any programming language is the way to go!

take a look at the video I just did: http://dribbble.com/shots/1410837-Animated-Landing-with-Facebook-Origami-for-Quartz-Composer

Why are we always comparing apples to oranges here? Look at the tools, use it in a real-world project to solve a problem and see if it works for you. If it doesn’t, use a different tool. In the one situation you better use QC, in the other Keynote, in the next one a sketch…

The most important things to learn are awareness and curiosity. You don’t want to run around with the same hammer for 20 years, but if Director or Flash still works for you to communicate a solution/solve a problem, then use those.

I dove into some of the Origami files and was able to knock out some nice mobile prototypes in an afternoon. Not bad for first time use. The big downside to me is that I can't actually run it on the phone. Canvas and Storyboard in XCode are another good alternative for a little more power, but also a little more tedious. These are all just tools and some are better in certain situations than others. Knowing the pro's and con's of each is your best bet.

Investigating Origami right now. The benefit of Origami/QC seems to be that devs can pretty much take the numbers out and plug them into code (or so my team mates tell me). Right now I use Flinto (seconding Yogev) for iOS interaction prototypes and Framer for web.

I would like to know about this too. Origami vs. Framer.JS. Which is easier to start using?

Keynote, Flinto, Invision: - Made to rapidly create a user-flow, to show interaction paths and give an overall feeling

QC, Framerjs: - Made to create intricate animations, which details/numbers can easily be translated into the Apps source code

QC vs Framerjs: QC basically reminds me of those camera animation and scripting panels from 3D SW. It's simple and just needs some time to fiddle around with the boxes and numbers to learn, yet it will always be faster than writing pure code.

But, as many already mentioned, in the end it depends on your liking. With some practice in framerjs, you may come up with the same output, but it'll take more time.

I had heard that Apple officially deprecated Quartz Composer for lack of retina support. I'm not sure if that is/was the case, but that had kept me from diving into Quartz head-first.

There are a couple great branch threads on the topic of both QC, Interactive prototyping and transitional interfaces as a whole.

http://branch.com/b/transitional-interfaces-design-ux

-and- http://branch.com/b/quartz-composer

Ultimately, prototyping is to communicate your ideas into something your team, stakeholders, clients, engineers to understand visually.

So whatever tool or tools to get the job done is a matter of your preference.

Personally, I believe keynote is great at the storytelling and communicating the user journey of the user experience. Whereas, QC or FramerJS gives you the power of getting the details of the interaction to be exactly the way it is intended.

One thing great about QC and building mobile apps for iOS is that you can speak to engineers language as you work closely from prototype to actual coding. For example, tension/friction In a bouncy animation can be tuned to the exact number the way designers wants it, and engineers just have to apply the spec.

The only thing I worry about JS is that the expectation of an mobile app is about performance. And running anything complex in animation that is build off of JavaScript always feels off in the performance and actual intended interaction. But it's probably more of my problem, because I'm not good with JavaScript.

FramerJS is great for creating prototypes you can then test on a mobile device. I played with Quartz composer a while back and at the time there was no way to use the resulting prototype on a mobile device, which I found to be counter productive. I'm not sure if this is still the case.

Also, as Koen mentioned, you are using existing skill sets for front-end development (HTML, CSS, Javascript) meaning anything you learn whilst building FramerJS prototypes can be applicable to front-end dev and vice versa.

Anything that help you to get the job done :). Btw this kind of discussion on Stack Overflow would be closed because doesn't add too much value.

Keynote.

While I've used Framer and Quartz Composer before, they still take too much time to create basic flows and animations that cover a wide range of experiences. With Keynote you can build a ui, compontent-by-component using the same assets you provide to your developers. You can also leverage the amazing set of existing animations (which got better with the latest keynote) along with creating a sense of custom animation by animation stacking via magic move and others. Also knowing and understanding there is a difference of the timing function in Keynote vs iOS and Core Animation (which is .25 seconds) helps.

I used this video to learn a little about Origami & QC: http://vimeo.com/85578380

In it, the narrator states that QC is best used to prototype something you've never seen before--bc if you've seen it then you can just use that to describe what you want.

To make prototypes to feel for yourself or perform user tests, I use Hype: http://tumult.com/hype/ It is pretty great. It should be a part of this discussion now that it supports retina images as of the 2.5 release.

I haven't used Origami/Quartz yet, but I intend to. I like the idea of working with SVGs so you get a more pixel accurate representation of what you're building. Plus it seems like it has more fine grained interaction ability.

I have used Framer.js, I was intrigued so I gave it a shot a few weeks ago.

Took me about 2 hours to create this prototype, including: The visual design(sketch), Learning basic Framer.js(w/sketch output), and building the prototype itself. http://e.richietaylor.com/ProjectsAccounting/ Interaction is: Click Construction Project 2B > Building Materials Detail > Lumber Detail

And the back 'Last Breadcrumb' on each page.

We're in an interesting time for UX & Prototyping. A lot of tools surfacing, a lot of tools on the way (EvolveUI, Macaw.io) etc. I'm having a hard time settling on a toolkit.

I'd say Quartz with Origami. Even though it's quite obscure, lacks solid documentation and the more custom stuff is not obvious to create, it's also more rewarding and once you grasp it you will be able to push yourself into unexplored territory like the Facebook Design team. The immediate visual feedback allows you to tweak everything to your liking with less chance of errors and going back and forward with the browser. It's not perfect by any means, my comps tend to look like spaghetti after a while and I dread having to deal with anything more complex than a single interaction per file.

Framer is a good tool mostly if you're not bad with javascript, but a little complicated for mobile prototyping, imho. I was recently getting into Origami seems smooth and easy to dive in, but i haven't tested it's limits so far.

https://www.flinto.com/