
Origami Studio – Design Prototyping - eknight15
http://origami.design/
======
pavlov
The thing I dislike about most prototyping tools -- and Origami is no
exception -- is how so much emphasis is placed on polishing micro-interactions
before the app flow is even in place. It's like trying to produce a movie by
doing color correction before you even have a screenplay.

The mobile previews from Origami-like tools will show a refined "golden path"
through the app with beautiful stock photos in every screen, but more boring
use cases tend to be ignored. This tends to lead to usability problems down
the road, when users discover those "dead ends" that the design unconsciously
avoided.

It's also frustrating for programmers when you are handed a high-gloss
prototype that has no relation to the actual platform UI classes and
guidelines. Implementing all those fancy little triggered animations takes so
much time that no one has time to peek at the iOS guidelines and notice how
the design actually breaks 80% of Apple's rules.

Companies like Facebook have enough resources and actual UX competence to get
these things right (eventually), but I've seen this happen too many times at
smaller agencies and startups.

~~~
pjc50
This is a strong argument for prototyping the workflow with index cards and
pen; deliberately rough to deter people discussing whether it should be
cornflower blue.

(I think there was a tool that offered this, XKCD style, but I've no idea what
it was called)

~~~
mysterydip
Your comment reminded me of balsamiq:
[https://balsamiq.com/products/mockups/](https://balsamiq.com/products/mockups/)
is that the one?

Early on at my first appdev job, I was showing off all the changes I had made
in functionality of the website. The response I got: "make the box bluer"

~~~
pasta
I think the way to go is to create a mood board / app style guide / (whatever
you like to call it) that shows the design of elements. So you will have the
design of buttons (all states), fonts, font sizes margins, and maybe even only
one fake page design.

When you present this next to the interaction design customers can understand
what is going on and most can imagine what the end product is going to look
like.

And imho it's also a managers job to guide the customer away from (for that
moment) distracting remarks like 'make the box bluer'. You can simple fix this
by saying something like "Ok, we will note your remark about the color".

------
chridal
This piece of software is amazing. Great job on this, Facebook! And thanks a
lot for open sourcing it. I'd easily have paid a lot of money for this. I was
actually looking into Flinto before seeing this. Thanks!

~~~
jerknextdoor
I'm not seeing a license anywhere. What gives the impression that it's open
source?

------
theschwa
I'm really curious how this was built. Quartz Composer got a lot of things
right, but it's showing it's age. Was this rebuilt from the ground up?

~~~
darknoon
Engineer on Origami here: Yeah, it's rewritten from scratch as a native mac
app in ObjC++. Happy to answer any question you have :D

~~~
mortenjorck
This is, quite simply, incredible. My team was looking for something to
replace Pixate even before Google announced they were shutting it down, and
just having watched the first tutorial, it feels like we're done looking.

I feel silly jumping to a nitpick at this point, but I see one obstacle for my
team: There doesn't seem to be a way to enter custom screen sizes, apart from
eyeballing it with the resizable window setting (we're designing for a custom-
built Android device). That's probably not enough to stop us from using it,
but it would be great to have the option.

~~~
natosaichek
custom devices? Elsewhere in the thread this was posted... might be what
you're looking for.
[http://origami.design/documentation/workflow/CustomDevices.h...](http://origami.design/documentation/workflow/CustomDevices.html)

------
apercu
This has popped up as a recommendation for me several times. Each time I spent
like 2 minutes looking for non-app examples. Is Origami phone app only, or can
you prototype browser/desktop experiences as well?

~~~
noir_lord
[http://origami.design/tutorials/getting-
started/Previewing-a...](http://origami.design/tutorials/getting-
started/Previewing-and-Sharing.html#content) shows templates for desktop :)

~~~
100ideas
to use these "templates", add the "browser chrome" patch to your document
[https://facebook.github.io/origami/documentation/patches/Bro...](https://facebook.github.io/origami/documentation/patches/Browser-
Chrome.html)

~~~
100ideas
It's a little confusing because some of the official example files don't use
the "Browser Chrome" patches and instead implement that content with multiple
"Chrome" layers. Just delete those if you are starting from one of the
tutorial files.

------
sandGorgon
i really wonder why facebook did not build something cross platform .. maybe
using something like Electron to build something like Figma.com

It would have been brilliant for Linux desktop users.

~~~
hbosch
It's pretty clear that they are targeting designers with this product, and
that audience is very largely on macOS.

~~~
sandGorgon
That is an unfortunate case of chicken-and-egg.

And even more so, when you look at Facebook pushing education and internet.org
in developing countries.

India uses Linux much more than the Mac.

~~~
hbosch
Education and internet.org don't really have anything to do with this product.

~~~
sandGorgon
not directly.. and I also realize I dont have any right to angst in this case
as well.

It would have been so much better to have a cross platform solution though.

------
ftrflyr
Origami looks interesting but, I just deleted my Facebook account. I got into
a tat with some Facebook Product Designers in a FB Design Group, went to bed,
woke up, and discovered I was kicked from the group (couldn't even see the
page any longer). I would rather not associate myself with products where the
attitude is: Listen to what we say - otherwise, we will drag your name through
the coals and ban you.

------
Smirnoff
I really wish there was a prototyping tool that could serve as a learning tool
to jump from being a designer to a programmer.

The problem with tools like Origami (and Framer.js) is that you need to know
coding and many designers just don't know it. Thus, they stick with easier
solutions like Principle. It would be great if a tool could start off looking
like Sketch and slowly become Xcode as I learn more features and become more
experienced.

~~~
pavlov
Try Neonto?

[https://neonto.com](https://neonto.com)

It is essentially a bridge from designs into Xcode and Android Studio. There's
a Sketch import plugin too that preserves elements:
[https://neonto.com/sketch](https://neonto.com/sketch)

~~~
redindian75
wow.. looks too good to be true!

Ive been searching for something like this..and never heard of this!

Thanks a bunch!

------
luisehk
Great, another mac-only prototyping tool.

------
praveenster
This looks like a very powerful tool just by browsing through the examples for
few minutes on the site. Minor issue with the documentation, however, is that
there seems to be issues with pages of the site rendering incorrectly on both
Safari and Chrome on the iPhone.

[http://imgur.com/PRDR2j1](http://imgur.com/PRDR2j1)

~~~
darknoon
Hey, looking into it. I tried visiting
[http://origami.design/examples](http://origami.design/examples) on my phone
but it looks fine to me. Try refreshing?

~~~
praveenster
Nope, refreshing doesn't seem to help. examples seems ok but
[http://origami.design/learn](http://origami.design/learn) seems to have the
issue like the screenshot I attached above.

~~~
praveenster
[edit] the link that seems to have issues is:
[http://origami.design/tutorials/](http://origami.design/tutorials/)

------
mschaef
This looks cool... but I have to admit I was a twinge disappointed it wasn't
software for designing paper-folding origami. :-)

------
swsieber
Brilliant! Flow programming applied to ui state & design.

Edit: And by "Flow programming" I mean something like :
[http://noflojs.org/](http://noflojs.org/)

------
radley
The critical issue with prototyping apps is that you're designing for a
mythical mobile platform only semi-related to the main two. As such, you end
up mastering code, tricks, and techniques for a fake platform when you
could've been learning practical fundamentals of UI design directly in Xcode
or Android Studio... or both!

------
neves
It is Mac only. If you don't have one, no need to spend time following the
link

~~~
BoorishBears
That's just not true.

~~~
hood_syntax
Would you spend money buying a Mac just for this software?

~~~
ddorian43
Maybe a virtual-machine ?

~~~
ferbivore
Installing macOS on non-Apple hardware is a violation of the EULA. Sure, Apple
don't seem to care about it at the moment, but it's still technically
something you can be sued over.

Downloading macOS in the first place is also a violation of copyright law if
you don't own either a Mac or a copy of OS X 10.7. It's also probably a
violation of the Mac App Store TOS if you don't own a Mac, which I guess could
lead to getting kicked out of the Apple Developer Program if they ever start
cracking down on Hackintoshes.

~~~
bmpafa
Sierra works alright in VMware, even w/ design apps.

The showstopper for most is that you can't really use anything > a 1080p
monitor w/o squinting, b/c of some peculiarity with macOS ui scaling.

~~~
ferbivore
I do apologise - looks like the big issues have actually been fixed since I
last tried this.

------
danenania
For anyone who's used both, how does this compare to Sketch for design and
prototyping work?

~~~
ksherlock
Complement is a better word than compare. Do your mockups in sketch, copy-
paste them into origami, then use origami to test user interactions.

------
ilolu
Is it going to be open source by any chance ?

------
ayh
Another tool from FB that they believe everyone needs. However, it's just
useful for FB. :)

------
buckhx
Anyone have experience with how Origami compares against InVision?

~~~
theschwa
Invision is great for prototyping a general work flow, how the user moves from
screen to screen, but it's not designed around building individual
interactions. You upload a bunch of screenshots and create clickable areas
that link to another screenshots with some basic transitions. Origami is
designed around building out individual interactions and transitions.

------
lukeinator42
haha, from the title I thought this was for prototyping origami designs. It
still looks awesome though!

------
robert_foss
Is Origami Studio Open Source?

