Origami  Course

Build a Chat App Prototype

Building prototypes in Origami can look like a huge mess when you have over a screen or two. In this series, learn to stay organized and keep your sanity while building an awesome chat app.

There are 7 episodes.

  • 1

    Use ContextKit to Add Realism to Your Origami Prototype

    • 5:21
    • Free
    Danny White recently released a cool project called ContextKit designed to give a truer app experience. Get started with our messenger prototype by building some context!
    • 5:21
    • Free
  • 2

    Set Up Custom Fonts in Origami Studio

    • 1:53
    • Free
    If you use anything other than San Francisco in your prototype, you’ll have to do a bit of legwork to get the fonts to display correctly on your device. Before going further let’s do that now.
    • 1:53
    • Free
  • 3

    Create Scatter Designs with the Random Patch in Origami

    • 7:06
    • Pros
    With a bit of clever patch work, you can make a detailed random design. Learn how to use loops and the Random patch to make a star field.
    • 7:06
    • Pros
  • 4

    Animate a Splash Screen in Origami with Repeating Animation

    • 6:38
    • Pros
    Now that we have a random star field, the last bit of polish on this splash screen is to add some animation!
    • 6:38
    • Pros
  • 5

    Build Screen Transitions in Origami Studio

    • 6:31
    • Pros
    With the splash screen built, we can contain it in a Screen component and transition to the walkthrough. We’re also getting started with layout and design of the walkthrough in this episode.
    • 6:31
    • Pros
  • 6

    Build a Card UI with Components

    • 9:30
    • Pros
    The walkthrough screen is going to be built as a carousel of cards. We'll tackle building the card component in this episode.
    • 9:30
    • Pros
  • 7

    Add Missing Patch Options

    • 1:29
    • Pros
    When you build a custom component, you need to make sure to expose any property that you want to be editable. There are a few lingering properties to add to our walkthrough card component.
    • 1:29
    • Pros