Unfolding the Art of Code with Origami Studio
For designers interested in using code as a creative tool, Origami makes it possible to learn core programming concepts visually.
Code has long been an essential part of my prototyping toolbox, and something Punchcut has strived to make a part of its design process. But when Facebook launched Origami Studio last year, we saw an interesting opportunity to integrate advanced prototyping in a new way. Having always needed code for high fidelity interactions, we were impressed with the capabilities of a completely visual tool.
Now, after spending a bit more time this year learning Origami Studio, we’re keen on its potential. With a refreshingly focused point of view, Origami Studio isn’t trying to be a prototyping panacea. It’s not going to help you model big picture things like architecture or task flows very efficiently. But it’s great for working out the details behind microinteractions.
There’s an interesting tension in Origami. On one hand, you need to understand basic programming concepts, and without some discipline your prototype can end up like a nightmarish logic diagram. On the other hand, the visual interface turns these technical concepts into an almost playful experience.
But one thing’s for sure: Origami Studio doesn’t vilify code. It is, without apologies, a programming environment for designers. Mainstays like artboards and layout features are markedly absent. The entire canvas focuses on how your design works over what it looks like.
Wisely, Facebook seems a bit shy about this perspective. Most designers are turned off by programming. But to get the most of Origami Studio or any other logic prototyping tool, you can’t just learn its features. You have to learn the fundamentals of programming. And for those into the idea of designing with code but averse to arcane scripts, Origami might be a great way to start.
Why Origami?
It isn’t just the visual interface that makes Origami a compelling programming language for designers. It’s also the simplicity of the syntax.
Every function of Origami, from basic arithmetic to advanced animation, is expressed with patches. Patches are the visual building blocks of an Origami program. The consistency of the patch interface lets you learn new programming concepts without needing to learn a new syntax each time.
Seeing the Fundamentals
A good visual designer doesn’t just know how to use Sketch. They understand the elements and principles of design and can apply them through any visual design tool. Similarly, an effective prototyper understands a set of fundamental concepts they can use across their prototyping tools or programming languages.
As we learned Origami, we built an example world clock app that could show most of those fundamental concepts. We also kept a set of annotated source files describing each fundamental, emphasizing universal programming concepts over features unique to Origami. Though our world clock app is more complex than anything we’d ever sensibly prototype, it’s helpful for relating all the concepts in a single setting.
Our app managed to cover a lot of concepts, which we summarize below.
- Data Types
- Output
- Input
- Math
- State
- Logic
- Repetition
- Data Structures
1. Data Types
We interweave colors, sounds, words, and numbers seamlessly in our design software. But to a computer, all these elements are indistinguishable data. We need to express these elements in a specific format so that the computer can properly interpret them.
Origami’s most basic patch, Splitter, converts an input to a specific data type.
2. Output
The simplest program you can make is one that emits static feedback to an output device: a display, speaker, haptic motor, printer, projector.
In Origami, output is usually a visual interface layer. We can adjust layers directly through the property inspector, just like we do in Sketch. But with layer property patches, we can also adjust layers programmatically. The clock app controls the clock hand rotations and Time layer position through property patches.
The concept of output is a great opportunity to think outside the limits of our visually-oriented design tools. Origami goes beyond the display with output patches for sound and haptics. Origami also has a Wireless Broadcaster patch for outputting raw values like colors and text, so you can reuse them as inputs throughout your program.
3. Input
After understanding the concept of output, programming just becomes an exercise in making your output dynamic. A simple way to start is with input: program settings, user interactions, device characteristics, external data.
The clock app uses an Interaction patch to know when the user taps the menu button or swipes the Time layer. It also uses various Wireless Receiver patches as inputs for numeric settings.
Like output, the concept of input is a great opportunity to think beyond visual interfaces. Origami input patches give you access to the device cameras, mic, and even the accelerometer.
4. Math
Output has lots of numeric properties: visual dimensions, audio volume, haptic intervals, etc. Many of these values will be set manually through the layer inspector or patch inputs. But math lets us calculate these values while our program is running. From responsive layouts to animated transitions, math is an essential concept in making output dynamic.
One of the most common math concepts in UI design is ratios. Ratios numerically relate input properties to output properties. The clock app uses a Progress patch and Transition patch to create a ratio that translates the time in seconds (input) to the angle of the second hand (output).
5. State
Programs evolve as their conditions change. Screens alternate, buttons light up, games keep scores, shopping carts fill. Advancing and maintaining the state of a program is central to the dynamic nature of interactive media.
The clock app uses a Switch patch to alternate between the two states of the Time layer: on screen, off screen.
6. Logic
Logic is what allows a program to evaluate the conditions in and around itself. These conditions are expressed as statements that are either true or false: “the time is 12:00 or later.” A program uses the truth of these statements to determine its state.
The clock app uses a Less Than patch to figure out if the time is AM or PM. If it’s AM, the dial appears white. Otherwise, the dial appears dark gray.
7. Repetition
Repetition is at the heart of automation. At its most powerful, repetition can be the backbone for complex intelligence algorithms. At its simplest, repetition can make short work of screen layouts.
The clock app uses a Loop patch to systematically build out its menu from a single menu item.
8. Data Structures
Data is just another type of input. By this point, we’ve worked with it in small ways: a numeric setting to position of the Time layer when it’s off screen; the color settings of the clock. But the data behind the menu items (city names and GMT offsets) reveals the challenges of working with larger data sets. Data structures help make the menu items more portable, scalable, and efficient to access.
The clock app uses a JSON input patch to organize and encapsulate the city names and times encoded in the app menu.
The Case for Code in Design
We’re pretty excited for Origami’s potential to bridge the gap between designers and programming fundamentals, but this inevitably stirs up a tired debate:
Should designers code?
- Yes, because code holds designers accountable to the implementation of their ideas.
- Maybe a little, because understanding code lets designers communicate with developers.
- No, because knowing the limits of code compromises design.
Every designer has surely made up their own mind on this already. But popular perspectives look at code only as a production medium that inherently belongs to developers.
Programming isn’t just about developing a software product. Sometimes it’s about generating a series of numbers more quickly and accurately. Or decrypting the Enigma machine to help end World War II. Or creating interactive art. Or making movies. Or building robots.
Code is a place where we can express ideas and solve problems. Code is a design medium.
Developers will always help us understand whether a concept can work on a specific machine. But by learning programming through Origami Studio, Framer, and the logic prototyping tools to come, designers can still play a role in understanding whether the concept can work at all.
A Punchcut Perspective
Contributor: Emilio Passi, Principal Design Technologist
© Punchcut LLC, All rights reserved.
Originally published at www.punchcut.com on October 2, 2017.
Want the future in your inbox?
Click here to sign up for our monthly newsletter — Future View!
