Origami Studio Tutorial #8 | How to use Loops to create girds, tables and more – UX Hacker

Origami Studio Tutorial #8 | How to use Loops to create grids, tables and more – UX Hacker.
#OrigamiStudio #Facebook #Prototyping #Tools
—
Using loops is a great way to reduce the complexity of your prototype and save time when repeating common elements. This Facebook Notifications prototype consists of one looped notification, with an editable Profile Picture, text, timestamp and glyph. Download the tutorial files to rebuild this prototype using loops.

Manually duplicating
All layers mentioned above are already prepared in the tutorial files — for one notification only. If we wanted to make a few rows of notifications without loops, we could Copy ⌘C and Paste ⌘V the Group. This process however is laborious, and does not support easy editing and changing should any need arise later on.

Looping instead
With loops we can use our one notification as an instance and repeat it. If we want to change one thing across all notifications, we can do it once, and have it reflected across each of them. To create a loop, double-click on the Patch Editor and type to find Loop. Press Return ⏎.

Be sure you have inserted the Loop patch, and not something else.
Looping a position
We know that we need 6 of these notifications, so change the Loop patch Count input to 6. We want these 6 notifications to stack up vertically, so connect the Index output of the Loop patch to the Position Y of the Notification Group.

Hiding the Chrome Group shows us the 6 instances of Notification appear to be stacked up on top of each other. They are actually positioned 1 point vertically away from each other starting a Position Y of 0. This is because the Loop patch gives us 6 values and numbers starting from 0 which are connecting directly to the Y Position of Notification.

source