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

There are 5 Origami courses.

  • Build a Shopping List Prototype

    8 EpisodesBy Chris Jacobs

    In this course you will create a shopping list that actually works and is responsive on all devices! Episodes include advanced tips around s...

  • Advanced Origami Techniques

    6 EpisodesBy Chris Slowik

    Once you've got the basics of connecting patches and creating logic down, you can do just about anything in Origami. This series looks at so...

  • Build a Chat App Prototype

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

  • Origami One-Takes

    3 EpisodesBy Chris Slowik

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

  • Introduction to Origami

    6 EpisodesBy 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 30 Origami episodes.

  • Finishing Touches

    To finish off our app prototype, we'll add functionality to the Clear and Share links in the navigation bar.

    • "Finishing Touches" in Origami
    • 5:57
    • Pros Only
    • Watched
  • Swipe to Delete - Part Two

    Now that we have our swipe to delete interaction, let's hook it up to our shopping list so we can remove items from it.

    • "Swipe to Delete - Part Two" in Origami
    • 7:11
    • Pros Only
    • Watched
  • Swipe to Delete - Part One

    Learn how to create one of the most commonly used interactions - a swipe gesture to delete items.

    • "Swipe to Delete - Part One" in Origami
    • 5:29
    • Pros Only
    • Watched
  • Checking Off Items

    Now that we have items on our list, it's time to check them off! In this episode, we will make a reusable list item component and make our item count text smarter.

    • "Checking Off Items" in Origami
    • 7:28
    • Pros Only
    • Watched
  • Adding Items to a List

    A prototype really shines when it handles real user input. By the end of this extended episode we will be able to type and add items onto our shopping list! We will also ...

    • "Adding Items to a List" in Origami
    • 4:42
    • Pros Only
    • Watched
  • Build a Text Entry Component

    Components are a great way to stay organized and modular in Origami. In this episode you'll build a fully functional text entry component.

    • "Build a Text Entry Component" in Origami
    • 7:55
    • Free to Watch
    • Watched
  • Responsive app layout

    Our prototype is going to be a huge success, so lets make sure it looks good on every device! Special tips for iPhone X as well.

    • "Responsive app layout" in Origami
    • 4:06
    • Free to Watch
    • Watched
  • Starting with a scrollable list

    Starting with the basics, in the first episode we will make a scrolling list of items.

    • "Starting with a scrollable list" in Origami
    • 4:13
    • Free to Watch
    • Watched
  • Link a Progress Animation to Scroll Distance

    Small details can make an interaction way more satisfying. Connecting the animation of a progress ring to the scroll progress on the cards is one of those small details. ...

    • "Link a Progress Animation to Scroll Distance" in Origami
    • 5:31
    • Pros Only
    • Watched
  • Scrolling Groups with Custom Page Sizes

    Creating some custom behavior for a scrolling group can seem daunting but its simply a matter of understanding how a scroll group works and supplying the right values.

    • "Scrolling Groups with Custom Page Sizes" in Origami
    • 8:55
    • Pros Only
    • Watched