Topic  

Origami

A new tool for designing modern interfaces, built and used by designers at Facebook.

There are 3 Origami courses.

  • by Chris Slowik

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

  • by Chris Slowik

    Quick one-video component breakdowns. No extra setup, just how to build stuff. Exploring how to build a different item each episode!

  • by Chris Slowik

    Get a walkthrough of Origami Studio, the prototyping tool brought to you by Facebook. It's a pretty unique way to build prototypes, but powe...

There are 16 Origami episodes.

  • Add Missing Patch Options

    Add Missing Patch Options

    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
  • Build a Card UI with Components

    Build a Card UI with Components

    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
  • Build Screen Transitions in Origami Studio

    Build Screen Transitions in Origami Studio

    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
  • Animate a Splash Screen in Origami with Repeating Animation

    Animate a Splash Screen in Origami with Repeating Animation

    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
  • Create Scatter Designs with the Random Patch in Origami

    Create Scatter Designs with the Random Patch in Origami

    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
  • Set Up Custom Fonts in Origami Studio

    Set Up Custom Fonts in Origami Studio

    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
  • Use ContextKit to Add Realism to Your Origami Prototype

    Use ContextKit to Add Realism to Your Origami Prototype

    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
  • Re-Sort Scrolling List

    Re-Sort Scrolling List

    Re-Sort Scrolling List
    • 5:29
    • Pros
    In this quick component breakdown, we'll build a scrolling list of content. The special feature here is a toggle that resorts the list items. Check it out!
    • 5:29
    • Pros
  • Parallax Scroll Indicator

    Parallax Scroll Indicator

    Parallax Scroll Indicator
    • 6:34
    • Pros
    This episode packs in so many techniques its crazy - you'll be creating a scroll indicator that changes color depending on what item you have selected.
    • 6:34
    • Pros
  • Hide Navbar on Scroll

    Hide Navbar on Scroll

    Hide Navbar on Scroll
    • 7:14
    • Pros
    Typical behavior for a navbar on a mobile app these days is to tuck the header when scrolling the content below. This episode breaks down how to build a component like that.
    • 7:14
    • Pros
FirstLast