Topic  

Origami

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

There are 2 Origami courses.

  • 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 9 Origami episodes.

  • 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
  • Add More Interaction

    Add More Interaction

    Add More Interaction
    • 4:31
    • Pros
    To complete our camera prototype, we'll implement the Grid toggle switch.
    • 4:31
    • 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
  • Creating and Tweaking Scroll Areas

    Creating and Tweaking Scroll Areas

    Creating and Tweaking Scroll Areas
    • 3:24
    • Pros
    Taking the camera UI one step further, this lesson covers how to add scrolling to the buttons on the "Pro" mode.
    • 3:24
    • Pros
  • Importing from Sketch

    Importing from Sketch

    Importing from Sketch
    • 4:54
    • Free
    Bringing your content into Origami from Sketch is really pretty simple. In this episode, you'll learn the ins and outs of importing your designs.
    • 4:54
    • Free
  • Pop Up a Dialog

    Pop Up a Dialog

    Pop Up a Dialog
    • 5:33
    • Free
    Origami is all about motion and interaction. This episode covers creating a simple popup interaction based on your design. Learn about patches - the components of an origami file, and how they can be connected to create interactions.
    • 5:33
    • Free
  • Built-In iOS Components

    Built-In iOS Components

    Built-In iOS Components
    • 2:24
    • Free
    Origami contains a selection of built-in components, based on commonly seen iOS objects such as dialogs and switches. They can really help speed up the prototyping of system level interactions.
    • 2:24
    • Free
  • Triggering Alert Buttons

    Triggering Alert Buttons

    Triggering Alert Buttons
    • 5:45
    • Free
    Built-in components can also have interactions applied to them. In the case of our Alert View, each button has a trigger to which we can attach our animations.
    • 5:45
    • Free