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
3

Create Scatter Designs with the Random Patch in Origami

7:06ProsDone
4

Animate a Splash Screen in Origami with Repeating Animation

6:38ProsDone

Build Screen Transitions in Origami Studio

6:31ProsDone
6

Build a Card UI with Components

9:30ProsDone
7

Add Missing Patch Options

1:29ProsDone

Build Screen Transitions in Origami Studio

Published by Chris Slowik

Episode Notes

Extra tips from the author

Making a navigable prototype in Origami is pretty dependent on using the Screen component. Screens handle presenting content and help establish hierarchy. Add one to the project now and rename it "Context/Splash". I like to name my screens for what's contained in them or the name of the actual screen in the app if its only one thing. Move MSGR_APP into the Screen component. Set the presentation style of the screen to "None", and there will be no animation when presenting the screen.

At the moment, the screen doesn't actually show when we start our prototype. Fix that by adding a When Prototype Starts patch, and connect it to the Present input of the Context/Splash screen. Now, when you start the prototype, it will already be presented.

Add another Screen component and call it "Walkthrough". This will be where we start to build more of the prototype. Place a Wait patch and set the time to 4s. Press w on your keyboard to add a Wireless Transmitter and Shift-W to place a corresponding Wireless Receiver. Connect the receiver to the Present input of the Walkthrough screen. When the Wait patch fires, it will wirelessly trigger the presentation of the Walkthrough.

It would be a good idea performance-wise to turn off the spinning loading indicator as well. Add a Switch, and connect the output to the Enable input on the Repeating Animation patch. Connect the App Loaded trigger to the Turn On input of the Switch. To Turn Off the switch, connect the output of the loading wait patch. When the app presents the Walkthrough, it should also turn this off.

The remaining bit is a little design of the Walkthrough screen. Copy and paste the title and the button from sketch. Set the appropriate anchor points and positions. Origami can put a background and radius on groups, so you can delete the background layer of the button and instead use the group's background. Set it to 147cf8 and the Radius to 6. The button should look great now, with just a text layer as the only child!

Episode Topics: