Hi-Fi Prototyping: Origami vs. Framer
Prototypes allow us to create authentic experiences, get valuable feedback during user testing and start development when we have effectively found the best solution.
As they say: “A prototype is worth a thousand words”.
In Lateral View we are always attentive to the new options in the market that can serve to facilitate and improve our workflow, and after going through many prototyping tools we have found the ones that are in our opinion the two leaders: Origami and Framer.
Both applications did not start out like this: Origami Studio was actually a plugin for Quartz Composer developed by Facebook and Framer Studio began as the Framer.js library.
Over time they became independent applications focused exclusively on prototyping, and also added several new features.
The first thing we should do if we want to animate our design is to open it in the prototyping tool, for that we simply drag and drop from the folder where we have our project.
In addition, each offers particular options for importing our files: if we are in Origami we can copy in Sketch and paste directly into the app. Framer, on the other hand, offers a plugin that allows to keep the design synchronized with Sketch, therefore the changes that we make will be updated automatically.
Both tools are directly related to programming, and considering that the vast majority of its users came from the design world over time they made interaction with the code as friendly as possible.
For example, Origami manages the relationships between elements and their properties connecting blocks more visually, allowing us to understand the application quickly. Although we must be careful not to form hundreds of unintelligible connections that end up hampering our work. A great advantage is that the Facebook team has developed many native components that come integrated and we can use to streamline our work.
On the other hand, one of Framer’s strengths is the Auto-Code feature, with which we can define an interaction or manipulate the properties of a layer directly from a panel while we see how the code is automatically generated. This way, we can create our own components to reuse them in other projects.
If at the time of testing our application we want to use real information Origami allows us to add it from a JSON file. In addition, in Framer we can bring user names, profile photos, or whatever we want by making a call to an API.
When it comes to sharing our prototype, whether with customers or developers, we want them to interact with it and feel it as it were real even if a line of code has not yet been written.
For this, the best way to visualize them is in the native apps that both Origami and Framer have, whether for iOS or Android, as they take advantage of the native features of the device (such as the camera, microphone, accelerometer, among others) and also let us see in real time the changes we are making.
In addition, we have different alternatives to share our design according to the tool:
- Origami allows us to record the screen, where we can explain specific parts or a tour of the whole project very easily.
- Instead, Framer generates an HTML prototype that can be displayed in the browser. The great advantage of doing it this way is that if we make changes in the design, the client or developer can see it again from the same link. On the contrary, in Origami we need to send them a new video. Another point in favor of Framer is that it also allows to capture the data that the user enters into the prototype, and this way we can test with real information.
In short, at a glance they may seem very complex tools, but as we use them we discover that we can understand them quickly. Moreover, in the official sites we can find documentation and examples to download.
In general terms Origami is easier to understand and the iOS and Android components that are already built reinforce that, while Framer, although first may look more complicated, ends up giving us more freedom and limitless possibilities.
As usual, the best we can do is make the decision based on our particular needs.
If you want to know more about technology and innovation, check us out at Lateral View or subscribe to our newsletter!
