Our designers' thoughts on prototyping tools

profile picture

Kjelle Designer

24 Nov 2016  ·  7 min read

Our designers compare two leading prototyping tools: Framer and Origami Studio.

At November Five, we’ve actively been implementing prototypes into our workflow from day one. We used to focus primarily on low-fidelity prototyping, like wireframes and sketches. In recent years, however, we’ve felt the need to make our prototypes a bit more interactive, tangible and realistic. High-fidelity prototyping has saved us a tremendous amount of time showcasing concepts to clients and explaining the details of our design to our developers.

High-fidelity prototyping obviously isn’t a new concept, but the tools for making these prototypes have dramatically improved over the last two years. We’ve seen lots of new players coming into the game, while once-popular tools are suffering a slow and quiet death.

In this post, we want to share our experiences with Framer and Origami studio, the two biggest competitors in the field today.

Let’s make some introductions

Framer Studio has evolved from the Framer.js library into an actual app with the sole purpose of prototyping. The app takes a playground approach that many have tried to mimic, but ultimately fail to. The last major update introduced Auto-Code, which makes designing and developing a prototype practically one and the same.

Origami was released a few years ago as a plugin for a true piece of dinosaur software shipped by Apple: Quartz Composer. Many bugs and development issues pursued Facebook to develop their own tool. Facebook recently made their first real version of Origami Studio available. A dedicated version of the plugin with a load of new features that were not available in the Quartz Composer environment.

We’ll walk you through the most important steps of prototyping in both environments, paying attention to the pros and cons of each of them – and hopefully answering your questions along the way…

Importing and updating assets

Alright, so you have this awesome design. To show it off, you want to make it interactive, but you don’t really have a clue how to start.

Both platforms offer a very basic, straightforward approach to adding assets from a folder. Just drag and drop and you have your image in there – easy!

Framer offers a plugin for Sketch, Figma and Photoshop to import directly from those apps. This is really great when you update your design a lot while you’re making your prototype. Origami doesn’t allow this, which means you’ll have to export a lot of assets each time. They do allow you to copy-paste content from Sketch into Origami. Less efficient, but it works.

Clearly, this is one area where Framer takes the cake.

(Visual) Coding

A second aspect that’s worth looking into is the way both tools handle coding.

As we all know, designers and code has always been a bit of an issue. While the industry knows more hybrids than ever (designers who can code or developers who can design); most of us out still try to focus on one thing only.

With that in mind, it is obvious why most people who get into prototyping are quickly running into their own limitations. They’ll find they need to start coding while they have little experience doing so. And if they chose a tool that doesn’t require code, they’re confronted with the fact that these are too limiting, leaving them stuck with only pre-defined animations and transitions.

Framer’s success is related to this dilemma: the tool uses Coffeescript, a language fairly similar to Javascript, which lowers the learning curve. And by combining their Auto-code functionality with the live drawing tool, designers can start prototyping very quickly, and learn how the code works while they are doing so.

Origami takes a different approach: it doesn’t use code, but Visual Code. This was a new concept for some people in digital design – it’s borrowed from video FX tools, which have been using Visual Code for decades, and is the most visual way to represent data treatment. It reminds me of the basic logic boards we used to have in school: physical boxes that have input and output. By chaining up multiple boxes, you manipulate your interface within the boundaries you’ve created. It takes some time to pick up on, but once you do, it’s an ideal playground.

Reusing code

When we look at what both packages can do in terms of reusing code for development purposes, there’s a clear difference. While Framer has already generated some readable code that can easily be translated to a web development project, Origami Studio has built-in code exporting options. Though it’s a very limited feature, Facebook has invested a lot to create animation libraries on all major platforms (Web.js, Android.java, iOS.m). This way, they have created their very own translation layer between Origami Studio and your own projects. The result is an easy way to implement you basic animations.

However, this doesn’t mean that we can just copy-paste entire projects for your developers to start from. It only works for general specs and animations.

Previewing and sharing your prototypes

Both apps have a mobile version that let you show off your prototype. This makes a prototype so realistic that it serves as a perfect example of how the app will or should function and react to human input. Both have basic offline capabilities and work as they should.

Another basic functionality you expect from a prototyping tool is the ability to share a prototype with a client or coworker – preferably including the previewing functionalities we described above. While Framer is basically an html prototype, the sharing capabilities are quite extensive. You can share a version (with device) in the browser to anyone who needs it. If they want to demo it on a device, they can just open the prototype and start using it.

Origami, on the other hand, only allows you to use their prototypes in a device by previewing and storing it via the Origami app. You can record your entire flow, but sometimes that’s not enough. Instead of sending a link that can easily be updated, you wind up sending new videos for every iteration, which is not ideal.

Using real data

“This all cool stuff, but can I use actual data in my prototype?”

The short answer: yes! Both Framer and Origami give you the option to use real data from a json feed/text file.

In Framer, you can quickly map keys to values without major hiccups. Anyone who knows a little code can get this up and running fairly easily. Using Framer, you can also take full advantage of the web environment and use data through the networking capabilities.

Origami lets you add a json file like any text file that you can parse accordingly. Networking capabilities are currently not available.

Examples, Docs and Community

One of the most underrated features of these tools is how easy each of them is to learn. Thanks to two very big communities on Facebook, online documentation and downloadable examples, people can pick up the pace very quickly. Both tools support their users very well and their developers are always open for feedback. In return, the community offers a lot of prototypes and advice that gets reviewed and shared among the user base.

Framer even organises meetups all over the world where people can share and learn to work even more efficient. You can learn more about their meetups here.

Facebook hosts Origami talks occasionally, which is more of a one-way conversation, but a nice enough attempt that will likely grow over time.

The verdict

If you’ve read this far, you might have been hoping for our definitive answer to which is the best tool out there. I’m very sorry to disappoint, but the answer is: “it depends”.

More specifically, it depends on what you’re trying to accomplish. Both Framer and Origami are very nice tools, and they are lightyears ahead of the rest of the competition. But both have their flaws.

They each have a different kind of learning curve, but in both cases, once you get to know the tool, it’ll quickly feel like second nature. Both are great to test on a device.

So where do they differ? Let’s list some pros and cons…

Pros and Cons

In short: if you need a playground to experiment with crazy or native interactions, in a limited amount time, Origami has everything you’re looking for. But if you need to make very complex prototypes that require real data, Framer is the name of your game.

As is so often the case, the key is to weigh the pros and cons for your upcoming project and see which tool feels best for you.

Curious about other parts of our workflow? Want to know which tools we use? Drop us a line on Facebook or Twitter – we like to talk and love to share!