3 things that’ll make your prototypes easier to read

I’m thrilled to see that Facebook has continued improving Origami Studio. As a designer who codes, there’s something satisfying about working through interactive logic with a visual tool.

But it’s hard to convince new users of ’s potential when they’re faced with an all too common scenario:

Yuck. I’d rather write code.

Somewhere in this indecipherable mess, a map is being zoomed by a pinch gesture.

You could argue that Origami was never designed to handle something this complex. While I wholeheartedly agree that prototypes should be focused, designers will inevitably push the boundaries of these tools, and we’ll stop using them if they can’t scale.

Origami prototypes aren’t scripts, but they’re still programs. And just like scripted programs, Origami prototypes can be engineered in a way that makes logic easier to follow, maintain, and grow. Using just a few techniques, we have a shot at scaling visual code to more sophisticated applications.

1. Section your code with Wireless Broadcasters

A lot of Origami’s visual complexity comes from intersecting cables and excessive branching.

makes this hard to read.

This code toggles the visibility of the Header, Content, and Background layers whenever Button is tapped. It also uses the device screen size to set the layer dimensions.

You can make this logic easier to read with Wireless Broadcasters and Wireless Receivers. Broadcasters and Receivers allow you to connect patches without using cables. They work like variables in scripted languages, storing a value that can be referenced throughout your prototype. This lets you break down code into short linear paths that are easier to follow and manage.

Wireless Broadcasters and their corresponding Receivers.

To clean up the example above, you can use Broadcasters to centralize the values shared by all layers: screen width, screen height, and a pulse that indicates Button has been tapped. Each layer can then use these values through corresponding Receivers.

Wireless Broadcasters organize the prototype into 5 manageable sections.

2. Annotate your code with comments

Commenting code is a standard practice familiar to all programmers. Thankfully, a lot of Origami prototypes are also using comments, and they become even more meaningful when the code is sectioned with Broadcasters.

3. Hide complexity with patch groups

Suppose you’re making the pinch-to-zoom interaction for the map prototype we showed earlier. To make the gesture work, you need to calculate the distance between two screen touch points. You can figure this out using the Pythagorean theorem (distance² = Δx² + Δy²) and some math patches:

Calculating the distance between two points on the screen.

But your code doesn’t need to be muddied by the details of this math. It’s just noise that’ll make your overall prototype harder to read.

You can abstract the distance logic by selecting the patches and grouping them (⌘G) into a single custom patch:

A group patch hides the distance logic, making your overall prototype easier to read.

Groups are a great way to hide complexity, modularize, and reuse your code. You can customize group names and ports, duplicate groups, and even add groups to a shared library.

Putting it all together

Here’s what the complete pinch-to-zoom prototype looks like after applying Wireless Broadcasters, comments, and groups:

Pinch-to-zoom, revisited.

You can take a closer look at the Origami file on GitHub.

Yes, the logic is still complex. But eliminating cables, adding comments, and hiding unnecessary details improve the narrative quality of the code. It’ll be easier for others (and myself!) to read and update in the future.

I can’t say I’ve mastered well-engineered Origami code, but I’m confident the techniques in this article are a good start. As more designers adopt and perfect these practices, we might even see visual code evolve from simple prototypes to fully functional software.

Source link https://blog..io/a--for-cable-clutter-in-origami--f07e6a65264f?source=rss—-eb297ea1161a—4


Please enter your comment!
Please enter your name here