9 ms·
Origami Studio – Design Prototyping
- theschwa 10y agoI'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 10y agoEngineer on Origami here: Yeah, it's rewritten from scratch as a native mac app in ObjC++. Happy to answer any question you have :D
- ConAntonakos 10y agoPardon me if it's a silly question, but was Swift not a viable option for macOS development?
- darknoon 10y agoOrigami eng here: Swift wasn't ready when we started a couple years ago. We actually used some swift for internal things and it has been a bit of a pain, eg with the macOS SDK update for Xcode 8. Combining ObjC and C++ you get a lot of the benefits of swift like functional programming / static type checking etc, paying a similar price in compile time. It would be hard to achieve the elegance of ComponentKit syntax (https://github.com/facebook/componentkit https://github.com/facebook/componentkit) in swift though. It lets us express the UI in a functional way :D
- ConAntonakos 10y agoInteresting! Thanks for the response!
- vvanders 10y agoVery cool stuff, actual interaction prototyping is an area that's sorely missing in terms of tooling. Is there any sort of export to a production framework(I.E. for integrating into existing iOS/Android apps) or is this purely for prototyping?
- theschwa 10y agoThat's fantastic. I can't imagine how much work has gone into this project. I'm excited to see what this does for the adoption of Origami. Are there any personal stories from the process you're able to share?
- mortenjorck 10y agoThis 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 10y agocustom devices? Elsewhere in the thread this was posted... might be what you're looking for. http://origami.design/documentation/workflow/CustomDevices.html http://origami.design/documentation/workflow/CustomDevices.h...
- redindian75 10y agoI am sure you would have been asked this 100s of times - Is there a way to EXPORT it to actual code (Swift/JS for Web) etc? Or is just used for only previz? That would mean someone can prototype an interaction which is impossible to code Finally, what is the goal? Is it just to be a prototyping tool or Will it evolve into a App maker itself? Or at least able to export code. Thanks for giving it away free!
- sandGorgon 10y agoi 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 10y agoIt's pretty clear that they are targeting designers with this product, and that audience is very largely on macOS.
- sandGorgon 10y agoThat 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.
- pjmlp 10y agoI bet they even use Windows more, even if not all copies are legit.
- hbosch 10y agoEducation and internet.org don't really have anything to do with this product.
- sandGorgon 10y agonot 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.
- mobiuscog 10y agoA decent 'designer' would at least specify the OS and requirements somewhere on the page. Perhaps the title should reflect it's a mac-only tool.
- 10y ago
- praveenster 10y agoThis 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 10y agoHey, 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 10y agoNope, 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 10y ago[edit] the link that seems to have issues is: http://origami.design/tutorials/ http://origami.design/tutorials/
- neves 10y agoIt is Mac only. If you don't have one, no need to spend time following the link
- BoorishBears 10y agoThat's just not true.
- hood_syntax 10y agoWould you spend money buying a Mac just for this software?
- ddorian43 10y agoMaybe a virtual-machine ?
- ferbivore 10y agoInstalling 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 10y agoSierra 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 10y agoI do apologise - looks like the big issues have actually been fixed since I last tried this.
- chridal 10y agoThis 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 10y agoI'm not seeing a license anywhere. What gives the impression that it's open source?
- danenania 10y agoFor anyone who's used both, how does this compare to Sketch for design and prototyping work?
- ksherlock 10y agoComplement is a better word than compare. Do your mockups in sketch, copy-paste them into origami, then use origami to test user interactions.
- swsieber 10y agoBrilliant! Flow programming applied to ui state & design. Edit: And by "Flow programming" I mean something like : http://noflojs.org/ http://noflojs.org/
- apercu 10y agoThis 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 10y agohttp://origami.design/tutorials/getting-started/Previewing-and-Sharing.html#content http://origami.design/tutorials/getting-started/Previewing-a... shows templates for desktop :)
- 100ideas 10y agoto use these "templates", add the "browser chrome" patch to your document https://facebook.github.io/origami/documentation/patches/Browser-Chrome.html https://facebook.github.io/origami/documentation/patches/Bro...
- 100ideas 10y agoIt'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.
- 100ideas 10y agoThere is a drop-down selector in the upper-left corner of the the app's menubar that provides presets for document size, resolution, browser chrome, etc for a number of common devices (watch, phone, tablet, computer, television, blank). Looks like you can also add your own "Custom Devices" http://origami.design/documentation/workflow/CustomDevices.html http://origami.design/documentation/workflow/CustomDevices.h...
- buckhx 10y agoAnyone have experience with how Origami compares against InVision?
- theschwa 10y agoInvision 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 10y agohaha, from the title I thought this was for prototyping origami designs. It still looks awesome though!
- pavlov 10y agoThe 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.
- vvanders 10y ago> 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. Yup, that's why I feel it's super important that these type of tools feed into a production workflow. It means you can hit those constraints upfront(removing needless back and forth between eng<->design) and you as a developer don't have to worry about pixel minutia. It's a win-win on both sides, but a really hard sell since the impact is a second-order effect reflected in the work produced instead of the tool its self.
- darknoon 10y agoOrigami eng here. I agree completely: the defaults should be the platform conventions. This wasn't much a part of the original Origami, but we've tried to improve that in the new version by providing some premade iOS and Android components for the most common things. You can show an iOS styled Action Sheet, Android checkbox, etc., without building it from scratch (look in the layer + menu). While this doesn't include everything you need to know about iOS or Android conventions as a designer, it does encourage people to start with the standard controls and then look to custom solutions only when they don't fit. As much as possible, I tried to make the Ports on the layers match the API that the engineer sees in ObjC or Java so it feels like you're speaking the same language. You can also break these components open and customize them, somewhat like you would as an engineer by subclassing or composing sub-parts. Internally at FB, we also made some custom layer patches that match the UI conventions for the FB app, Instagram, etc so you can have consistency by default. These bundles of layers & patches are called Systems (still working on docs for this), which you can build and distribute among your team. There is some more about this in our F8 presentation earlier this year. The idea is that as a designer you can fill in the text for your Alert View or whatever instead of messing around with resizing rounded rectangles & text boxes like in Sketch.
- ilolu 10y agoIs it going to be open source by any chance ?
- Smirnoff 10y agoI 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.
- gk3 10y agotheres no code involved in origami, and framer is slowly automating a lot of the code required to get start with simple prototypes
- pavlov 10y agoTry 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 10y agowow.. looks too good to be true! Ive been searching for something like this..and never heard of this! Thanks a bunch!
- darknoon 10y agoAnecdotally, I have a friend who is a designer who did a lot of Quartz Composer prototyping and eventually learned ObjC to implement some of his designs. Seems like once you get the idea of building out gestures and animations it transfers across the specifics of Patches / textual code / etc. Now he writes c++, swift, etc :D
- svarrall 10y agoFlash was this for me. Started with the animation tools and slowly started writing action script to make it interactive. Try Interface Builder in XCode it allows you to do all of the layout side, but you quickly need to start writing snippets of code to do things like round corners and change border colours.
- mschaef 10y agoThis looks cool... but I have to admit I was a twinge disappointed it wasn't software for designing paper-folding origami. :-)
- robert_foss 10y agoIs Origami Studio Open Source?
- luisehk 10y agoGreat, another mac-only prototyping tool.
- radley 10y agoThe 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!
- ftrflyr 10y agoOrigami 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.
- ayh 10y agoAnother tool from FB that they believe everyone needs. However, it's just useful for FB. :)