Origami Studio. Self positioning components.

TLDR: I built a self positioning base component that you can extend, so you don’t have to manually position your components anymore. The links are on the bottom.

If you use Origami a lot and you’ve probably noticed that building the actual screen takes you most of the time. As you become more and more proficient in prototyping advanced interactions the mundane tasks take proportionally more and more time. Even if your entire design system lives now in Origami you still need to spend significant amount of time positioning elements on the screen when you want to build something from scratch.

Dynamic layout 😱

Things are still pretty manageable if you just want a static page. What if components need to be responsive? What if they have dynamic height? What if some of the components only show up based on some condition? Building a layout logic to handle all of this complexity would take a serious amount of time. You probably would’n even bother and just handle what’s necessary for the prototype not to fall apart.

Self-positioning base component that every other component can extend should solve this problem once and for all. I guess extensibility is a foundation of object oriented programming. Still not the first thing you may think of when prototyping with Origami.

How does it work?

Consider the example below.

Changing Y Offset, Height and Width ratio of 4 self positioning components in Origami Studio.

What’s happening in the example is pretty simple. All 4 bricks are build on top of the self positioning component (I “extended” the base component just by changing the background colour and adding a label displaying the “Ratio“). The way self-positioning part works is that component always want to occupy the next available place on the screen. It also wants to occupy the entire width of the screen, unless the “Ratio” input says otherwise. To set up the layout from the example above I just created the following connections.

Components connected via Layout port in order they should appear on screen.

The layout direction is left to right and positioning is based on “rows” — components will not optimise their position based on available space, but rather follow the left to right order. Height of the row is determined by the highest element in a row.

The tallest component in the row determines it’s height.

Loops

Using loops is the easy way to create any type of collection view. You can use index value to drive a Position Y or passing it through a Grid Layout patch to build a list and grid respectively.

The same goes for a self positioning component. I added a Layout Loop patch that allows you to create lists and various grids in seconds.

Here’s the fun part though. If you turn off the component in the loop — it will pass the positioning information to the next component in line.

Turning off self positioning components distributed by a loop.

The setup of the layout in the example above is ridiculously easy. You connect the component Layout output back to it’s Layout input via Layout Loop patch. That’s it. I added an option picker to variate the Ratio in the grid so it follows: row-1: full, row-2: half, quarter, quarter, row-3: quarter, half, quarter.

Downloads

Here’s the google drive folder with the self positioning component and the example above.