Quartz Composer or framerjs?

over 9 years ago from , Designer

How is the take up on these two for prototyping? Do many people use them? And which do you recommend?

Thanks :)


  • Koen Bok, over 9 years ago (edited over 9 years ago )

    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.

    44 points
  • Pasquale D'SilvaPasquale D'Silva, over 9 years ago

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

    4 points
  • Jaime AscanioJaime Ascanio, over 9 years ago

    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

    3 points
    • Luke MillerLuke Miller, over 9 years ago

      Di you use any tutorial? I found this http://vimeo.com/85578380 but what you've made seems a bit more complex.

      2 points
    • Taylor LeCroyTaylor LeCroy, over 9 years ago

      Help me understand the advantage of something like Quartz over After Effects. I feel like I could accomplish this effect quickly and easily in AE, but have trouble wrapping my head around the noodly interface in QC. I assume a finished Quartz prototype contains more useful information for the developers than does a .mov or video exported from AE?

      1 point
      • Jaime AscanioJaime Ascanio, over 9 years ago

        Yes you could achieve the same with AE, but you can not make it interactive, so if you are going to show the animation to a developer i think it much self-explanatory, the first prototype I've made using Origami in Quartz just took me 2 hours having not experience with Quartz at all, and I feel like i could do it in 10 minutes now

        2 points
        • Taylor LeCroyTaylor LeCroy, over 9 years ago

          Makes sense, thanks. You can only add a layer representing someone's thumb in AE, but nothing compares to holding the real thing. I'll have to give Quartz another go with Origami.

          0 points
    • Nathan Langley, over 9 years ago

      How did you record that? Me and my buddy can't figure out how to do it in QC. Do you just screen record it?

      Nice work btw.

      0 points
  • Jens NikolausJens Nikolaus, over 9 years ago (edited over 9 years ago )

    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.

    1 point
  • Willie MorrisWillie Morris, over 9 years ago

    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.

    1 point
  • Jeff HeatonJeff Heaton, over 9 years ago

    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.

    1 point
  • Shrihari SankaranShrihari Sankaran, over 9 years ago

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

    1 point
    • Emily SaforrianEmily Saforrian, over 9 years ago

      I've looked at the documentation for both but haven't used them for client prototypes so far so YMMV.

      FramerJS is a javascript framework and the documentation is good. If you are comfortable with JS then you should be able to dive in and make some headway.

      Alternatively, Quartz composer is a whole new beast–the recent demos I looked at are confusing. I honestly have no idea how all the boxes and lines interact to build a demo.

      2 points
    • Toby KellerToby Keller, over 9 years ago

      I've used both. If you're comfortable with css and/or js, Framer has the less-steep learning curve. If you have no code background at all, Quartz is at least visually oriented, but still very complex.

      2 points
  • Andreas MitschkeAndreas Mitschke, almost 9 years ago

    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.

    0 points
  • Josh AustinJosh Austin, over 9 years ago

    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.


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

    0 points
  • Joe HsiaJoe Hsia, over 9 years ago

    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.

    0 points
  • Nick MangosNick Mangos, over 9 years ago

    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.

    0 points
  • Henrique Alves, over 9 years ago

    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.

    0 points
    • Antonio PratasAntonio Pratas, over 9 years ago

      I enjoyed pointing out the differences, specially in the authors reply, it's informative and worthwhile. Now, the show off of who likes what is completely useless.

      0 points
  • Jon KantrowitzJon Kantrowitz, over 9 years ago


    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.

    0 points
    • Juliano DasilvaJuliano Dasilva, over 9 years ago

      Can you show examples of prototypes you've built in Keynote? I use Keynote too. THanks!

      1 point
      • Elliott PayneElliott Payne, over 9 years ago

        I agree about keynote.

        I'm interested in using QC or framer, but the learning curve has kept me at bay so far. I really don't understand what flinto offers beyond keynote (or any of a number of tools available for assigning link targets to static images).

        0 points
    • Koen Bok, over 9 years ago

      I think Keynote is indeed great to quickly communicate an idea, but not to come up with new interactions, stuff that doesn't exist yet. I think currently QC, Framer or native are your only options for that, but flexibility comes with a learning curve.

      1 point
      • Jon KantrowitzJon Kantrowitz, over 9 years ago

        That's certainly a fair point as I've used Framer to create some unique animations where I previously hit the ceiling in Keynote. When it comes to any of these tools, I think it's really context specific which ones to use for the job...what you're trying to deliver and how you have to showcase an experience to communicate it effectively.

        1 point
  • Luke MillerLuke Miller, over 9 years ago (edited over 9 years ago )

    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.

    0 points
  • Richie TaylorRichie Taylor, over 9 years ago

    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.

    0 points
  • Maciej ZadykowiczMaciej Zadykowicz, over 9 years ago

    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.

    0 points
  • Jonathan LevyJonathan Levy, over 9 years ago (edited over 9 years ago )

    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.

    0 points
  • Yogev MarotzYogev Marotz, over 9 years ago


    0 points
    • Joe BarberJoe Barber, over 9 years ago

      Come on, man.

      Entirely not the same thing.

      9 points
    • Nathan ManousosNathan Manousos, over 9 years ago

      If you try to do the things QC/Framer are meant for, in Flinto, you're going to have a bad time.

      If you try to do the things Flinto was meant for in QC/Framer, you're also going to have a bad time.

      If you try to do the things QC/Framer was meant for in QC/Framer, you're going to have a mediocre time.

      If you try to do the things Flinto was meant for in Flinto, you're going to have a splendid time!

      13 points