Facebook’s new Origami Studio uses visual programming to create awesome app prototypes

Facebook has a new tool for designers, and it’s meant to make prototyping apps much faster and easier than your current workflow.

Origami Studio is native for OS X, and uses current technology like Core Animation for stability and speed. Facebook also built Origami Studio to feel like Sketch or Photoshop in use.

You’ll also be able to check out prototypes in real-time on the computer screen as part of the design environment, or on a phone plugged into your Mac. The prototypes can also be used when you disconnect from your computer, much like a side-loaded app.

The interface is a bit like visual programming, an old concept that never quite got off the ground for creating actual software. You take elements and connect them, but you don’t create elements in the IDE environment.

Instead, the working parts are created elsewhere (in this case, by Facebook). Origami Studio holds tightly to this principle, too; you can manipulate Facebook’s design elements in Origami Studio, but won’t be able to granularly create additional tools.

For instance, you can choose to create an actionable flow for a button, but not alter the shape of it. In Facebook’s example, you can change the opacity and scale.

There are elements like color fills and text layers built into Origami Studio, though. You can even manipulate the tap area of a button if you wanted to.

The real missive of Origami Studio is prototyping according to Facebook’s design language, which usually adds a nice layer of complexity to stock iOS or Android designs. There are nice animations, and the library even has some stock iOS elements like the notification popup you can use.

It’s a tool Facebook has been using for some time internally for designing apps, and they’re making it available to all of us. It’ll be a free tool, but Facebook won’t be releasing it until later this year.