App Prototyping: Getting Started with Facebook Origami

Facebook Origami: A powerful tool to create interactive application prototypes without coding

Core points:

• Facebook's Origami tool allows the creation of interactive application prototypes without any coding knowledge. It has been used by Facebook to build numerous flagship applications, proving its reliability and functionality.
• Origami integrates seamlessly with Sketch, and the prototype will be automatically updated when changes are made in the design tool. It also has code export capabilities, allowing engineers to export code needed for iOS, Android, and web animations.
• While Origami is a relatively new tool that may lack extensive support resources, it is easy to use and enables rapid prototyping. It provides real-time updates to the viewer when changes are made, and patch properties can be smoothly integrated to make it easier to understand and use.

In the field of software development, prototypes are working prototypes of applications (or websites) that are often used to test and collect feedback.

A well-crafted prototype always presents the way the final application works more reliably than dozens of static model pages.

However, not all designers and teams have the ability to build such prototypes. Writing code from scratch takes time and expertise, while many online tools require some kind of subscription.

Happily, a year ago, Facebook released Origami, a free tool for designing modern UI and interactive prototypes without writing any code.

It must have been tested in practice – Facebook has built several of its flagship apps using Origami, such as Instagram, Messenger, Slingshot and Facebook Paper.

Introduction:

Facebook Origami itself is a large Quartz Composer "patch" stack that makes it easy to develop working models that include demonstration animations and other complex interactions.

Patches are pre-existing animation, graphics, or interactive modules. You can think of patches as building blocks for building prototypes.

The best way to understand Quartz Composer is to think of it as a visual programming tool that can take input parameters and output results. It allows you to import Sketch or Photoshop layers as patches and then connect them with animations and events until you make something that simulates the final application experience.

Once you have mastered the Quartz Composer, you should be able to combine prototypes immediately and easily. Here is a more detailed description of the history of Quartz Composer. To download Origami, follow the steps in the Downloads section of its official website.

Interface and basic tools:

When starting Quartz Composer, you will first see the Template Selector window. To start a new Origami project, go to: File>New Origami File" or ⌥⌘N.

After creating the Origami project, you will be prompted to use three overlapping windows. To make your workspace look better and cleaner, go to: Window> Adjust to one-third" or ⌃⌥⌘0.

1. Editing window

Edit window is your main workspace—a workbench where you can drag and drop patches and assemble the best combination of animations and interactions by connecting different layers of your design.

From the edit window, you can also access other tools and windows such as patch library, viewer window, patch inspector and basic tool buttons such as back/forward and zoom in/out.

2. Patch library window

The patch library contains all the components needed to build a prototype. These are the bolts and nuts that achieve magical effects. Just double-click or drag and drop to add different elements from the event and patch library to the edit window.

3. Viewer window

The viewer window looks like an actual device emulator. All actions you perform in the workspace (edit window) are reflected here. You can change the device type displayed by changing the Viewer Size patch property of Type to the preferred value of the device type of your choice.

There are even Windows Phone and Apple Watch types in the drop-down menu by default.

Code export

After approving the prototype, it's time for the engineer to do it. Obviously, this can be a very challenging process for designers and programmers, who need to work closely to ensure that the final product matches the prototype very well.

Problems may arise when the final product is not similar enough to the approved prototype.

However, thanks to Origami's code exporting capabilities, engineers can easily solve this problem by exporting the code needed to implement the same animations in iOS, Android, and the web.

Sketch integration

Origami's Sketch integration allows you to link designed layers in the Sketch App directly to your prototype. This means that every time you edit a design in Sketch, updates are automatically reflected in your Origami project.

Demo Mode

Use demo mode, you can beautifully present your prototype to the audience in full screen mode, with different background images, human hands holding the device, and touch pointers.

If you have any iPhone or iPad, or through the trackpad of your Apple device, you can directly control the prototype.

You can find more details on the various features on the official Origami website via this link.

Conclusion:

Facebook Origami works well and does get the job done. Adjusting the prototype is fast because you don't need to compile or click the refresh button when editing a patch or importing a new image. All content will be reflected in the viewer in real time.

You don't have to go to great lengths to understand what it means when you get a prototype from someone else. Patch properties are usually self-explanatory and seem to integrate smoothly without breaking anything else.

The downside is that Origami is relatively new and does not have a large amount of support resources yet. Nevertheless, the existing resources are well-made and organized.

You can find examples and tutorials on the official website you find here.

If you want to add content to this introductory article, or just have questions, feel free to leave a comment in the comment section below.

FAQs on Prototyping with Facebook Origami:

How is Facebook Origami different from other application prototype tools?

Facebook Origami is a unique tool that provides a variety of application prototyping capabilities. Unlike other tools, Origami offers a real-time preview of the design, allowing you to view changes in real-time. It also offers a variety of pre-built components to make creating complex interactions easier. Additionally, Origami allows you to export code snippets that can be used directly in your project, saving you time and effort.

Is Facebook Origami free to use?

Yes, Facebook Origami is completely free to use. It is an open source tool, which means anyone can use it to create their own application prototypes. This makes it a cost-effective solution for both individuals and businesses.

Can I use Facebook Origami on any operating system?

At present, Facebook Origami is only available for macOS. However, the team behind Origami is constantly working to update and improve, so it may work for other operating systems in the future.

How to share prototypes created with Facebook Origami?

Facebook Origami allows you to share your prototype in a variety of ways. You can export prototypes as video, GIF, or interactive prototypes. You can also share prototype links so others can interact with it directly.

Can I use Facebook Origami without any coding knowledge?

Yes, Facebook Origami is designed to be easy to use and does not require any coding knowledge. It uses a visual interface that allows you to create complex interactions by simply dragging and dropping components.

What type of application prototype can I make using Facebook Origami?

Facebook Origami is a multi-functional tool that can be used to prototype various applications. Whether you are creating social media apps, mobile games, or productivity tools, Origami has the functionality and flexibility to turn your ideas into reality.

How to get started with Facebook Origami?

To get started with Facebook Origami, you need to download and install Origami Studio software on your Mac. Once the installation is complete, you can start creating your own prototype using a variety of available tools and features.

Can I collaborate with others on Facebook Origami?

While Facebook Origami does not currently offer built-in collaboration features, you can still collaborate with others by sharing prototypes and collecting feedback.

How to learn more about using Facebook Origami?

There are many resources to help you learn more about using Facebook Origami. The Origami website offers a variety of tutorials and guides, and there are many online communities where you can connect with other Origami users and learn their experiences.

What are the system requirements for Facebook Origami?

Facebook Origami requires macOS 10.13 or higher. It also requires a Mac with a 64-bit processor.

The above is the detailed content of App Prototyping: Getting Started with Facebook Origami. For more information, please follow other related articles on the PHP Chinese website!