Create intricate mobile prototypes with this free tool from Facebook

Origami is complex but capable

Just as I finish mentioning the release of one excellent design resource another pops up. This week Facebook made a collection called "Design Resources" available to the public. There is an excellent collection of iOS 9 GUI assets, some high-res (though kind of gangly due to the cut out job) hands holding devices assets, and a mobile design prototyping tool called Origami.

While the design assets are nice, useful, and appreciated - it's Origami that grabbed my attention. Originally open sourced last year, it's now being thrust into the spotlight. This tool works with Quartz Composer, a visual design program for Mac OS and Xcode to create intricate mobile and desktop application prototypes that look like the real thing.

snip 20151016101547 Facebook

The resulting prototypes are designed for presentation but are interactive. Gestures and actions can contain logic and the prototype will react in the same way that you'd expect a real app to behave.

With this power comes significant complexity however. Learning the software will take a lot of time, but once you get a handle on it you'll be able to spin up concepts for new projects in far less time than it would take to build natively. 

The prototype is built using nodes and node groups in a visual way. Each node or group of nodes has built in logic and a variety of configuration options. Even an average prototype can quickly grow into something intimidating.

snip 20151016103322 Facebook

If you're an app developer, you probably know how valuable prototyping can be in a project. It allows you to collect valuable and educated feedback from your client early on. If you wait until you've actually built a feature to show someone, chances are they'll want some changes that will cause you to backtrack and lose additional development time. Spending the upfront time to create a prototype might seem like unnecessary added work, but it will pay dividends when you actually develop the real thing. 

Origami even outputs UI animation/transition code in Objective-C, Java, or JavaScript to give engineers a head start in creating the same feel as you've designed in the prototype. 

It's an investment for sure to learn a tool like this. If you make that investment and become a capable prototype builder, you'll be able to wow your clients and assist your developers down the line.

Choosing the right tool to invest in is important however, and Origami is not the only game in town. Spending the time to learn each option is impossible, so you'll want to do your research and decide for yourself which option fits your need the best.

Introduction to Origami from Facebook Origami on Vimeo.

ITWorld DealPost: The best in tech deals and discounts.
Shop Tech Products at Amazon