Playing with Origami Studio

So...

Recently I have had chanced to take a look at the new Origami Studio.

Since I have been using Google Form, I was already used to the patch programming. This made me get excited for Origami, because I heard that it allows very open possibilities for prototyping with sensor, camera usage as well as receive-send communications with connected devices.

Initial layout of Origami Studio. Very simple layer view, property view, and floating preview windows. The main gray canvas is for the patch programming.

Origami is Sketch friendly. cmd+c/cmd+v.

Patch Programming

The patch programming allows prototyping to be tweaked at 'patch' levels. Also it is visually clean and organizable.

Once I was comfortable with the workspace, I began playing around with the tool to understand each patches and find work-around for interactions and instances that were not available in other prototyping tools.

1. Fluid Animation exploration

This is my very first try at Origami. Using the basic pop animations, switches, and transitions I created a micro interaction for page transition. The pop animation function allowed me to feel that bounciness in fluid movement.

2. Timed Animation Exploration

I also was inspired by the new Material Design website, and created a timed animation transition to test eased animation options in Origami Studio.

3. Quick Action using 3D Touch

At this point I realized that the studio has a 3D Touch patch. Since, there was no Apple component in Origami for Quick Action. I built it referencing from the iOS 10 

4. Camera

I am testing out the camera feed of Origami (notice my Origami T shirt!)

Spatial distortion is possible using 3D points and gyro-sensor. The video below uses rear-camera, video cropping, gyro sensor value, and 3D rotation.

Conclusion

Origami Studio is the most suitable tool in the market for designers as a all-purpose high-fideltiy prototype tool for mobile and web platform. It is all-purpose because the patches can be as simple to allow page-to-page transition, and as complex as building timed-conditional-3D elements.

The strength of Origami lies in mobile sensor-support (Camera, 3D Touch, Gyro) and its patch programming. So far ProtoPie is the only other prototyping tool with similar sensor-support. Designers are visual learners. Origami's patch programming UI allows easy organizing and collaboration with other people's works.

Personally I think its cleaner than code-based prototyping (e.g. Framer) and frame-based prototyping (e.g. Atomic, Principle). Code-based prototyping, generally takes time to learn and hard to work with other people's project unless markup is thorough. Frame-based prototyping tends to get messy after several layers overlap onto screen or several artboards, which makes it hard to track individual elements as the complexity of the prototype rises.

I continue to fiddle with Origami Studio and am posting things in my Dribbble.