You must be a Pro member to watch this episode.

Get Access Now

Sign in now if you're already Pro.

1

Use ContextKit to Add Realism to Your Origami Prototype

5:21FreeDone
2

Set Up Custom Fonts in Origami Studio

1:53FreeDone

Create Scatter Designs with the Random Patch in Origami

7:06ProsDone
4

Animate a Splash Screen in Origami with Repeating Animation

6:38ProsDone
5

Build Screen Transitions in Origami Studio

6:31ProsDone
6

Build a Card UI with Components

9:30ProsDone
7

Add Missing Patch Options

1:29ProsDone

Create Scatter Designs with the Random Patch in Origami

Published by Chris Slowik

Episode Notes

Extra tips from the author

Loops are a huge part of any real Origami prototype. No one wants to make a large number of copies of a single layer or group just to have to edit them again in the future if changes occur. Loops can also be used to great effect when making random displays of layers, like the star field in our splash screen.

Before getting into the random scatter effect, start by placing all the static layers. Copy and paste the layers over from Sketch, starting with the Observatory. Set all the anchor points and positions so they line up with the Sketch design. I typically start from the top layer, setting top/center anchor points, until the bottom layers, and align those to the bottom.

Now comes the really fun part - setting up the random layers. Place a Loop patch, and set the count to something like 32. Place a Pulse patch, and connect it to the Loop. Bring out 4 Random patches, and set the start and end values of two of the patches to match the X and Y dimensions of the screen. The random x position patch will go from 0-375 and the random y position from 0-667. One of the random patches will be for z rotation, so that can be 0-360 to cover the full range of angles. The final random patch will be for scale, and should be set to 0.5-1.

All you have to do to generate a bunch of random stars now is connect all the outputs of these patches to properties on your star layer. Even better - every time the app is launched, new random values will be generated! To really match the design, do a similar process for some dots as well, only make the scale smaller.

Episode Topics: