

Origami – Design Prototyping - geekrax
http://facebook.github.io/origami/

======
pavlov
AFAICT Origami is still a collection of plugins for Quartz Composer, a
graphics tool by Apple that's included with Xcode.

Quartz Composer is effectively deprecated: no updates since 2011, not
available in iOS, no Retina support. Building new products on it is not a
viable long-term solution, so I wonder if Facebook plans to build a
replacement.

(Incidentally, if someone wants to make a new Quartz Composer work-a-like, I
have a bunch of potentially suitable code that I could share with an open
source license... I made a node-based graphics app called PixelConduit whose
code I was planning to release but never got around to:
[http://pixelconduit.com](http://pixelconduit.com) \-- it could make a solid
base for a QC-style tool.)

~~~
didgeoridoo
Check out QC's spiritual successor Form at
[http://www.relativewave.com](http://www.relativewave.com)

Definitely way more focused on mobile applications than general-purpose
visualization, but it's been a pleasure to work with so far (much easier than
Origami)

------
pandeiro
Putting 'for Mac OS X/iOS' in title would be nice

------
kgc
The link to Quartz Composer on the Origami page is old. Here is the current
one for XCode 6.1 and Yosemite:
[https://developer.apple.com/downloads/download.action?path=D...](https://developer.apple.com/downloads/download.action?path=Developer_Tools/graphics_tools_for_xcode__xcode_6.1/graphicstools_for_xcode_6.1.dmg)

------
mbesto
The latest announcement is probably more important:
[https://medium.com/@bwalkin/introducing-origami-live-and-
ori...](https://medium.com/@bwalkin/introducing-origami-live-and-
origami-2-0-a68116294e65)

\- Origami Live

\- Code Export

\- Sketch Integration

Those are some seriously compelling features....!

------
afandian
I know of three people (including myself) who will find an interface very
difficult to use if there's so much movement in it.

Indicating state and actions by visual movement is so incredibly specific to
its audience (people who don't mind seeing things zipping round their screen
vs people who do) it's a shame to see it destined to become universal.

I wonder if they've (Facebook, Google) done any actual scientific research
about how various peoples' brains react to movement when they're trying to
concentrate on something.

~~~
exogen
All of the examples shown are animating things that are being directly
manipulated, not something in your periphery. What would you be concentrating
on while you're dragging something with your finger?

~~~
afandian
In the real world, if I manipulate a sheet of paper by swiping it with my
finger, I expect it to move directly with my finger. If it's wobbly, or
springy, my instinct is that it's less controllable and that I need to
concentrate more. Intuitively I feel (i.e. I haven't done any research on
this) that if something is unstable I need to put more neurons and metal
effort into controlling it.

If I'm dragging something then I expect it to move directly as I drag it. I
think that's something built into human brain, or learned and calibrated at a
very early age as we learn to manipulate objects. So if I continuously
transform the origin to the location of my finger at any given time, during a
drag, the subject of my drag should move.

\- The four first examples ('rope effect' , 'swipe off stack', '2d waggle',
'3d waggle') all involve expressing state changes in terms of movement.

\- I don't know what the rope effect is for except to look cute. But it feels
'unstable' as above.

\- I would much rather see a 'dismiss' button to get rid of something, and for
it to disappear, than to have to swipe it away and process seeing it move with
a 'swipe off stack'.

\- I would rather an object did directly what I told it than do a 2d or 3d
waggle.

\- 'Compose modal' makes the new modal box slide on screen rather than just
appear.

etc etc. I don't want to go through every example, but these are (mostly) all
introducing movement when I'd rather not have to process it.

You probably like them. I don't. That's the point. You can argue about
skeumorphism, flat, responsive design etc quite harmlessly. They matter, but
they don't actively exclude people.

But I think this is something that, like colour schemes, should be researched
properly and not subject to the whims of a designer. I'm sure plenty of
designers at one point in history have said 'we'll make it red on green, screw
the colour blind people'. Now we know better. I feel this is analogous on some
level.

~~~
exogen
> In the real world, if I manipulate a sheet of paper by swiping it with my
> finger, I expect it to move directly with my finger.

I challenge you to do this without "2D Waggle" happening (which just amounts
to some rotation depending on where you drag and which direction). I'll wait!
:)

Really though, that's the point of 2D Waggle. You say "I would rather an
object did directly what I told it" — when you swiped the paper and it rotated
a little, was it not doing directly what you told it to do?

To use an actual example in an actual app, have you ever used Tweetbot? I
encourage you to find someone who has it: a couple releases ago, they added
some new "physics-based" swiping animations for dismissing images. They pretty
much amount to 2D Waggle, but if you flick something super fast, you can
really send it spinning.

When I first saw a GIF of that behavior in the release notes, I, too, thought
it was pretty excessive. Then I actually used it, and wondered why swiping
anything would behave any differently. It felt as natural as swiping a real
piece of paper...which is exactly the point.

> 'Compose modal' makes the new modal box slide on screen rather than just
> appear.

Picturing what this would look like (the whole screen just instantly changes?)
– that wouldn't just look "boring" or whatever...it would look _broken_. Every
single app I just tried on my phone with a compose button slides the new view
into place because to do otherwise would be jarring. I honestly believe it's
aiding one's brain in doing _less_ work processing what the heck just
happened, not adding extra work. Research into this would indeed be pretty
interesting.

~~~
afandian
I'm prepared to be convinced otherwise! Like I said, I'm speaking only from
intuition.

I have a piece of paper on my desk. I put my hand on it and slide it. It does
pretty much what I ask it to. I would say it's 'well behaved'.

If I have some slippery surface and a slippery jell(y|o)-like object, it will
wobble. To me, that's a sign that I need to pay more attention to it because
it's not 'well behaved'.

Modelling not-well-behaved objects for interfaces seems counter-intuitive and
(I suggest) takes more mental energy to interact with. This is the point I
(hope I) made above.

As for the rotation, the origin-normalising in my previous comment is both
affine and rotational (yes, I didn't consider that when writing it). But if
you look at the examples, they also have rotational momentum. Paper doesn't
have that, as it's got low mass and is dampened by the friction. The closest I
could get to the Facebok examples is waggling a piece of paper about on the
end of a stick, or moving a heavy object on a slippery surface, and that's not
how I'd model an interface!

I just clicked 'compose' in GMail and the compose 'window' just appears.
Likewise in my text editor, and creating a new window in Mac OS Finder and
creating a new tab in my browser. Granted, there are lots of subtle (and not
so subtle) movements in various operating systems. But it's a world apart from
Google's Material Design demo video [0] and the 2d and 3d waggle [1].

Mac OS introduced the bouncing icon in the dock about a 15 years ago. Modal
'sheets' slide down. Ubuntu has things easing in and out. These can be
disabled (to a greater or lesser extent) without any problem.

But I think we're going to see a fundamental shift in the paradigm, especially
with Material Design, where movement isn't just easing things in and out. It's
bringing movement directly into the representation and manipulation of
objects.

It's a really cool, novel idea, but may leave some people behind (visually
impaired or just, like me, people who prefer minimal movement on screen). Your
jarring because the screen suddenly changes is my jarring because everything
slides around.

[0]
[https://www.youtube.com/watch?v=Q8TXgCzxEnw](https://www.youtube.com/watch?v=Q8TXgCzxEnw)
[1]
[http://facebook.github.io/origami/examples/](http://facebook.github.io/origami/examples/)

------
knd775
Overall, cool.

One thing, though: That download button is irritating. At least on Chrome, it
doesn't react whatsoever to mouseover/hover. The cursor doesn't even recognize
it as a button.

~~~
illicium
A bunch of other things are also broken in Firefox. Yay WebKit-only websites.

------
caseyf7
What about the license? Is there any cause for concern here?

[https://github.com/facebook/origami/blob/master/LICENSE.md](https://github.com/facebook/origami/blob/master/LICENSE.md)

" Facebook, Inc. (“Facebook”) owns all right, title and interest, including
all intellectual property and other proprietary rights, in and to the Origami
framework. Subject to your compliance with these terms, you are hereby granted
a non-exclusive, worldwide, royalty-free copyright license to (1) use and copy
the Origami framework; and (2) reproduce and distribute the Origami framework
as part of your own framework (“Your Software”). Facebook reserves all rights
not expressly granted to you in this license agreement.

...

You will include in Your Software (e.g., in the file(s), documentation or
other materials accompanying your framework): (1) the disclaimer set forth
above; (2) this sentence; and (3) the following copyright notice: Copyright
(c) 2013-2014, Facebook, Inc. All rights reserved. "

~~~
jnem
Not a lawyer, but..As far as using Origami for prototyping? No, I don't think
there is any issue. Using and shipping Origami framework along with your own
product, yes. Im pretty sure they are only saying "If you implement Origami
into your own framework, you must provide attribution".

------
kazinator
Origami is already the name of some folding editor from Microsoft. (Folding,
get it? It's actually a topical name.)

The Japanese language has lots of words; there is enough for every gaijin to
have a unique one for their programming project.

------
pieter
Anyone know how this compares to Framer?

~~~
fredoliveira
They share the same purpose, but functionally they're quite different:

1) Origami is a visual programming tool where you connect functional nodes.
Some nodes represent things on screen, some represent actions. You literally
connect them to eachother (connect my swipe node to my feed node) to prototype
your UI. You use origami in the same way you setup a modular synth, or use
something like pure-data or MaxMSP. The end result is a UI prototype.

2) FramerJS is a javascript-based prototyping tool that has a DSL for
programming the prototypes. You are very much writing javascript _code_ to
simulate the real interactions the user might have with your interface.

That's the _big_ difference. If you are familiar with Javascript, you will
certainly have an easier time writing code in Framer to represent animation
and interactions (it will also translate more easily to final production code
because in theory the algorithms for the interactions are similar). If you
have no programming background (or just feel at ease with visual programming),
you may prefer Origami.

(They're both great tools, and despite being quite accustomed to the latest
Framer versions, I'm going to try out Origami 2.0 too. Seems like a big step
from the previous version.)

------
thomasfl
Not available in Norwegian app store. Is there a precompiled version I could
simply just download?

------
crawfordcomeaux
Origami Live for iPhone isn't available for download in the US?

------
thewhitetulip
Why do all tools get created for Mac only?

~~~
olifante
because that's where the developers are, nowadays.

------
mgulaid
same problem here.. Origami Live ios app is not available in the USA app
store.

~~~
dceddia
I'm getting the same thing. I wonder though, does that mean it's available in
other countries, or is it just not available at all yet? Is that message
essentially a 404?

~~~
ni-hil
Yes, i'm on the french App Store and it's available

