Posted in technology research

How to Prototype a Mobile App Development with Origami Studio

In an environment where users have high hopes about their website and mobile experience, prototyping, and user testing is important. Progressively iterating on designs with ever greater precision is now normal, and a vibrant user experience industry has developed around this crucial range of practices. At the prototyping point, making software right eventually saves you time and/or resources later on

In an environment where consumers have high expectations about their web and mobile experience, prototyping and user testing are important. Progressively iterating on designs with ever greater precision is now normal, and a vibrant user experience industry has developed around this crucial range of practices. At the prototyping point, making it correct eventually saves you time and/or resources later.

10 Top Prototyping Tools

You can take other methods to prototype, and there are many resources out there to assist. Origami Studio is one of the newest on the block, created by Facebook and available free for macOS.

Origami Studio, which actually began its existence as a plugin for Quartz Composer (a visual programming language within the Xcode development environment of macOS) before it became a stand-alone application, has received significant popularity over the past year.

Follow the below steps to learn how easily a prototype can be created using Origami Studio.

#1. A New Prototype

Build a prototype for a mobile app development that will permit you to swipe through pictures and “like” a few of them. Once you have installed Origami Studio, you will build from the splash screen a new prototype.

#2. Adding layers

You will start applying a few layers to your prototype. In this scenario, add a logo situated at the top of the screen. Then add the layer using the + button in the top right and pick’ “Image Layer”. By highlighting and changing the properties of the layer you may resize and place it appropriately. Also, add a heart icon at the bottom of the screen after your logo to act as your “like” click.

#3. Creating an Interaction

You need to make your heart button address to user interactions. You may note that the cursor shifts to reflect contact on a mobile device in the preview tab. To address this, you need to build a “Patch” which is an essential function in Origami that takes inputs and generates outputs. Double-click the empty grey area to create a list of new patches, and check for “interaction”. Put your patch on the screen and it should appear.

#4. Linking Interactions to Layers

Your patch will react to touch anywhere on the prototype. Check it out by clicking on it and you will see the properties “Down” and “Tap” shift in real-time. When you select the “Layer” property in the patch, you can connect it to the layer that contains the picture of the heart, and now it will only respond to clicks in that particular area.

#5. Animations

Now when your engagement activates, you want to have something happen. Make another patch, a “Pop Animation”. This is used to build a springy effect. Keep the properties as they are for now but build a connection between the Tap output and the Interaction you previously built and the number input of your new Pop Animation.

#6. Transitions

The next thing you need is a Transition patch. This will permit you to assign low and high values to switch between as the Pop Animation’s Progress output changes. You can then connect the output values to the Scale property of the heart image layer to tell Origami to resize it when clicked on it. Now you should find that clicking on the heart animates a brief change in size. But, it’s not quite correct, as it quickly goes back to normal. Hiring a professional app developer will provide you the solution for you all of your needs. If you really want to develop an amazing mobile application you can hire a professional mobile app development company that will help you out in developing zero error mobile applications.

#7. Switches

Switch patches are the way that Origami changes between two conditions. You want that for “Like” click. An input transferred to a Switch patch will switch it between the “on” and “off” states, which can then be passed to subsequent patches as output. Build a new Switch and position it between Pop Animation and the Interaction. Instead, you should be able to click the heart to move it between large and small states.

#8. More Complex Behaviour

Congratulations! Now you have built your first interactive feature, using the most common patches you’ll find you’re using over and over again. You can add more patches to make behaviours more complex. Build a different coloured heart layer directly behind the current one, then add new patches to both to scale it at the same time, and change the denseness of the original layer to make it visible. Now it will turn larger and smaller as you press the heart, but it also seems to change colour.

#9. Carousel

To finish the prototype, add a picture carousel with that you want to encourage users to  ́ ‘Like”. To do this, you need first to install a series of layers group. Each picture will be a separate layer, with progressively offset x coordinates so that they are effectively sitting side-by-side in a row with only one visible on screen at any single item.

#10. Swiping Left and Right

The last thing you have to do to make it work is to enable left and right swipes to navigate through the carousel. Do this by building a Scroll interaction to connect to the carousel layer group. The connection generates an x co-ordinate which you can then bind to the carousel’s x property to transfer it. In the meantime, add a Clip patch that can be used to restrict values and guarantee that you don’t scroll to coordinates outside the carousel’s edge.


This is it. You have built a very basic application. You can also use the built-in “frames” of Origami Studio to position it on the backdrop of a device, which can help to give a professional touch up. Now that you know the basics of using patches you can start building more advanced complex behaviours. There are plenty of guides on the Origami Studio website which describe how famous features commonly seen in apps can be implemented.