1. Today we are excited to release Origami Studio for Mac and Origami Live for Android and iOS. We've been using Origami Studio internally for the past two years, and it's changed the way we design.
2. Origami Studio is a tool for designing and share modern interfaces. Patches allow you to add interaction, animation, and behavior to your prototype. Each patch performs a unique function and can pass and receive information to and from other patches.

• Origami Studio Download
• Music Studio For Mac

Free origami studio download. Design & Photo downloads - Origami Studio by Facebook Inc. And many more programs are available for instant and free download.

• Download

Thank you for using our Mac software library. Unfortunately, there is no direct download for the Mac version of Origami Studio. To download the application, proceed to the developer's site via the link below. FDMLib bears no responsibility for the safety of the software downloaded from third-party sites.

Often downloaded with

• Studio Devil BVC LiveStudio Devil British Valve CustomGuitar Amp Modeling Plug-In for Mac and...DOWNLOAD
• Studio Devil Virtual Bass AmpStudio Devil Virtual Bass Amp is a bass amp modeling and audio effects plug-in...$69DOWNLOAD
• Studio One 2Studio One 2 is a new, integrated approach to recording music, from tracking to...$399DOWNLOAD
• Visual Studio CodeVisual Studio Code provides developers with a new choice of developer tool that...DOWNLOAD
• MixMeister StudioMixMeister Studio is powerful DJ sequencer software for studio...$199.95DOWNLOAD

Studio Devil AMP (Amp Modeler Pro)

Editors & Converters

Microsoft Origami Experience Pack

Editors & Converters

Note: This post is now also on Medium. And there are Chinese (+ another one) and Russian translations.

I recreated the IF by IFTTT user onboarding in five different high-fidelity prototyping tools to get an idea of the differences between them: Proto.io, Pixate, Framer, Facebook’s Origami and RelativeWave’s Form.

See how these five recreations behave compared to the real thing:

Pages versus Layers

Why did I select these five? I discovered that recreating something that is this animation-heavy (icons moving around in different directions and at different speeds) is not even possible in most prototyping packages. The majority of tools only let you connect static pages, while only the more complex ones let you animate different objects or layers within a given page.

I’ll explain it a bit more.

Page-based tools

In a page-based tool, you lay out different screens, and then you make hotspots or buttons to connect them together. You tap a button somewhere on one screen to go to another screen. Page-based tools generally also have a choice of different transitions between screens, like fade in, slide in from the right, slide up from below, etc. It’s a bit clunky, but it’s a good way to make quick mockups when you’re still figuring out the flow of an app (which and how many screens are needed, how they would appear, where buttons should go, etc.).

Examples of page-based tools are: Briefs, InVision, Notism, Flinto, Fluid, Mockup.io, Prott, POP, Marvel, Balsamiq, Red Pen and Keynotopia. Granted, in some of these tools you can have animations or scrollable areas within a page, but you cannot use them to emulate every interaction possible in real native apps.

Layer-based tools

Every asset, interface element, or in other words, layer can be made tappable, swipe-able, draggable… but also animated. Prototyping a complete app in a tool like this would be crazy, though; it would be too much work (you might as well build the real app). But they’re great for trying out new interactions, or for tweaking the timing of an animation.

Proto.io, Pixate, Framer, Facebook’s Origami and RelativeWave’s Form are the tools I tried. To be honest, there are a few others – Axure and Indigo Studio – but they seem to be more enterprisey (read: rather expensive). I might try them out some other time.

So, onwards with the chosen ones.

1. Proto.io

Web-based, with players for iOS and Android.

Proto.io is a surprisingly powerful web app; it has many, many functions. But because everything works by drag-and-drop, clicking buttons and selecting values from lists, it can be a bit overwhelming sometimes to find the setting you need.

Because of the nature of the IF prototype – different objects moving at different speeds – I had to add several custom JavaScript calculations. The provided single-line text field was too small for the lengthy calculations so to have an overview I kept them in a text file on my computer. Important to note is that these JavaScript expressions can fail without warning. Be sure to check the console of your web browser when something doesn’t work. (I had an error caused by a variable containing a negative value.)

Previewing while creating the prototype

This is rather annoying: you have to click [Save Project] and then [Preview] every time you want see the result of the changes you made.

Sending a prototype to a client

• On the web: Easy – you can generate a public link, like this one. (These links can also be opened in a mobile browser, and added to the iOS home screen as an ‘app’.) You can also present your work to the general public in Proto.io Spaces.
• On a device: You can make (free) Reviewer accounts for clients and give them access to a project. They can run the prototypes in the iOS or Android app.

Differences between this prototype and the app

Not many. The animations are less fluid, though, because I had to attach many interactions containing custom JavaScript calculations to the scrollview. It’s not too bad on the web, but it’s way too slow on a device. Playback speed seems to be more normal for simpler prototypes.

Pros

• Easy to make a quick mock-up because of the extensive library of standard UI elements, many of them customizable.
• Proto.io is the only one (of these five) that’s also page-based: you can have multiple screens within a single project and create transitions between screens.
• Dropbox syncing for assets.

Cons

• No live preview.
• Animations can become slow when you add many interactions, like in this example.
• All your prototypes are saved on their web platform, which means that you can’t even run them when you would cancel your account. (There is the possibility to park your account: your projects will still be there when you reactivate your account. Parked accounts are $5 / month.)
• No 3D animation possible.

The prototype view on Proto.io Spaces (sign up to import it to your account)
Website proto.io	iOS app Proto.io	Android app Proto.io Player
Price $29/month or $288/year for 5 active projects. There are also plans for 10, 15 or 30 active projects, and a free 15-day trial.

2. Pixate

Desktop application for OS X and Windows. Players for iOS and Android.

Pixate seems to strike the right balance between ease of use and functionality: it can do a lot more than the simpler page-based tools, but the learning curve is not too steep: after going through the User Guide and video tutorials you will be on your way. There are also several demos that you can deconstruct to see how they’re made.

Previewing

Pixate Studio can use Xcode’s iOS Simulator (on Mac) to run the prototype. You can also connect with the iOS or Android app over local WiFi. This works great, especially because both (Simulator + app) update instantly.

Sending to a client

1. When you have a Cloud plan ($5/month) you can publish a project. People can then scan the QR code on the page with the iOS or Android player to run the prototype.
2. You can also add unlimited collaborators to your Cloud account and give them access to prototypes. They’ll have to log in to their account in the app.
3. Or you can simply mail somebody the .pixate file. They can then open and run it in Pixate Studio (but also see how it’s made and change it).

Differences with the app

• The sixth page is missing, because the canvas in Pixate is only so wide.
• The iOS app icons flicker sometimes, because I had to make three copies of each (and show and hide them) to work around abug in Pixate. Update 26 July 2015: They fixed this bug, so I updated the prototype.

Pros

• It’s easy to learn how to use it.

Cons

• Still a bit buggy; sometimes you might need to work around a bug.

The prototype view in app | download .pixate file
Website www.pixate.com	Mac or PC Pixate Studio	Mobile apps iOS | Android
Price • Pixate Studio: Free! (It used to be $149, until Google bought Pixate in July 2015.) • Pixate Cloud: $5/user/month or $50/user/year. (There is a free 30-day trial.)

3. Facebook Origami

Runs in Apple’s Quartz Composer for Mac. There’s a viewer for testing on iPhone or iPad.

As you probably know, Origami is built by the design team at Facebook working on Paper. Origami is not a standalone program, it’s kind of a plug-in for Quartz Composer, a visual programming environment that is part of Apple’s developer tools.

You program in Quartz Composer by connecting patches to each other. Different patches have different functions, and Origami is mainly a set of extra patches made for app UI design. Many people (not me, though) will prefer this to having to write code, but when you have to describe something like “if this, then do that, with the value from this calculation, but if not…” you’ll still have to program, but by connecting several patches instead of writing lines of code.

On a side note: IDEO also created a prototyping framework based on Quartz Composer, called Avocado. It has a few functions that might be handy for some projects: Bluetooth integration, an iOS interactive keyboard, a dial patch for scroll wheel-like interactions and a flippable card patch. Layers can also be made draggable.

Previewing

• On the desktop: Quartz Composer has a viewer, and any change you make in the editor will instantly be reflected in the viewer.
• On a device: With the Origami Live app you can test on an iOS device plugged into your Mac. The app reacts to all gestures (taps, swipes, etc.) but is a actually just a viewport to what’s running in Quartz Composer. So if your Mac has difficulty running the prototype at 60fps, it will not run any faster in Origami Live.

Sending to a client

This is going to be difficult. You can of course make a screen-recording of your prototype, but this defeats the purpose of making an interactive prototype; you might as well make something in After Effects. The only real way to try a prototype on another machine is to have the same setup. So if your client uses a Mac, they can install Quartz Composer + Origami to run your prototypes – after registering as an Apple Developer, of course.

Differences with the app

It might run a bit slower than the real thing, depending on your computer. Quartz Composer is quite a power hog, and might have your computer’s fan spinning, especially when your Mac doesn’t have a powerful graphics card (like my Mac mini) or have a few monitors connected (guilty). I get maximum 20 fps, even when using just one monitor.

Pros

• The documentation might be a bit lacking but there’s a very active user community. Plus you can find several videos, tutorials and blog posts.

Cons

• It can be hard to find out how to do things and which (of the many) patches to use.
• It’s unclear if Quartz Composer is still in active development. The last version is from November 2011. But at the same time, Apple would probably launch a replacement tool (for visual interaction design using Quartz) before mothballing this one.

The prototype download .qtz file
Website facebook.github.io/origami	Mac install instructions	iOS viewer Origami Live
Price Free! You do need an Apple Developer account, but that’s also free, as in beer, or whatever Apple developers might drink.

4. Framer

Framer Studio is a prototyping application for Mac, but the JavaScript framework it runs on, Framer.js, is open-source. You only need Safari or Chrome to use Framer.js.

No dragging and dropping, pushing buttons, or connecting dots here – in Framer you will have to code. Programmers will feel at home, designers maybe less so. But it’s not too hard—Framer Studio uses a simplified version of JavaScript: CoffeeScript. But the fact that the actual engine (Framer.js) uses JavaScript makes for a lot of possibilities: you can do everything that’s possible in a web browser, so you can connect to servers to use live data, or create a Twitter client that shows real-time tweets.

Previewing

• On the desktop: Framer Studio has a live interactive preview on the right; it updates instantly when you change something.
• On a device: There are apps for Android and iOS. They all connect to Framer Studio when on the same WiFi network, and automatically refresh the prototype every time you save in Framer Studio.

Sending to a client

With one click you can generate a public page (like this one), which can be viewed in Chrome or Safari, or in a mobile browser. (The link can be added to the iOS home screen as an ‘app’.) The same link can also be opened in the viewers (actually just chromeless browsers) for iOS and Android. A big prototype like this one might take several seconds to load in the viewer, but then it animates smoothly.

Differences with the app

This prototype does a bit more than the other four: you can switch between the Sign in, Sign up and Reset Password modes on the last page. (You cannot actually log in or sign up, but even that would have been possible to recreate in Framer.)

Pros

• Integration with Sketch or Photoshop is as good as it gets: you can refer to layers or objects by the names you gave them while designing. (Framer.js has a Framer Generator Mac application included that does the same trick.)
• Anything that is possible with JavaScript—like using live data from web services, or using the accelerometer—is also possible in Framer.

Cons

• You’ll have to write code for everything, for every animation or interaction. You’ll need to be or get acquainted with CoffeeScript, maybe also JavaScript.

The prototype view online | download .framer project
Website framerjs.com	Mac Framer Studio	iOS apps Frameless | Frames	Android app Framer
Price Framer.js, the JavaScript framework, is open-source and free - Framer Studio is $99. (There is a free 8-hours-of-active-use trial)

5. Form by RelativeWave

Mac application with a viewer for iPhone or iPad.

Form is still very young (it launched September 2014) and is clearly inspired by what Facebook and IDEO are creating on top of Quartz Composer. The folks at RelativeWave probably thought, “How would Origami look without the Quartz Composer baggage?” Origami users will feel right at home; many patches are the same and Form contains only the patches you need.

Previewing

The prototype actually runs in the (WiFi or USB) connected iOS app. You’ll notice that there is no readout of the values when double-clicking a connection between two patches if no device is connected. A viewer in the Mac application, like in Quartz Composer, would definitely be handy, and seems to be planned.

Origami Studio Download

Sending to a client

The (free) iOS viewer can open .form files, so you can just email the file to the client for them to run on their iOS device.

Differences with the app

Music Studio For Mac

Not many, I think. Let me know if you find any.

Pros

• Compared to Origami: the prototype runs natively on the device, so it’s a lot more responsive compared to Origami Live.
• You can use your device’s camera and location. (Origami can use your Mac’s webcam.)

Cons

• Same as in Origami when you have a complicated prototype: the resulting noodle soup. Grouping patches helps to keep an overview.

The prototype download .form file
Website www.relativewave.com/form	Mac application Form	iOS app Form Viewer
Price Free! The Mac application used to be $79.99, but when Google bought RelativeWave in November 2014 (only a few months after launch) they made it free.

What to use?

If you have not yet used any of these, and want some quick prototyping done:

• Pixate
• or Proto.io

But if you’re ready to invest time into learning a powerful tool:

• Form, when you prefer visual programming
• Framer, if you would rather write code

I got acquainted with all of them (at least a bit), so I might use different tools for different situations:

• A page-based tool when I’m still working on the flow of an app. There’s no need for high-fidelity prototyping in this early stage.
• But also Proto.io could be used for low-fidelity prototyping: it contains standard interface elements for iOS, Android and Windows Phone, and you can link between screens. And it would have the added advantage that the prototype could be made prettier afterwards with assets designed in Sketch or Photoshop.
• Pixate when there’s already an existing UI design and assets, as long as the animations are not too complicated.
• Form when the device’s sensors or camera need to be used in a prototype.
• Framer for everything else.

One more thing

These tools are all very young, and we’re all still figuring out what the best way would be to do interaction design, but I see a great future for Framer. I like the versatility and performance of Framer a lot, and I’ve found the perfect excuse to play with it some more: I’m writing a book about Framer!

The Framer book will be a manual for people without any programming experience, and will start with the basics of CoffeeScript. It will also contain tutorials in which you rebuild popular apps.

Update March 30, 2016:The book is available!