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.
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!