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

There are 5 Origami courses.

  • Build a Shopping List Prototype

    4 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 26 Origami episodes.

  • 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
  • Fix Clipping Issues

    This episode is just a quick update to fix some visual issues with the artwork. We'll show a different way to structure the cards to avoid cutting off huge glows.

    • "Fix Clipping Issues" in Origami
    • 2:03
    • Free to Watch
    • Watched
  • Getting Used to Using Components

    Components are something that can easily be overlooked, but they're hugely useful. Make the switch to thinking about components like symbols in Sketch.

    • "Getting Used to Using Components" in Origami
    • 8:15
    • Free to Watch
    • Watched
  • Accurately Transfer Designs from Sketch

    Importing designs from Sketch is pretty easy in Origami, but there are a couple different methods of import. Depending on how you need to use the imported layers, one met...

    • "Accurately Transfer Designs from Sketch" in Origami
    • 10:45
    • Free to Watch
    • Watched
  • Simulated App Launching

    Start off this prototype by making the app launch from the iOS Home Screen.. virtually! We'll use repeating animation and work with loading images in this quick intro les...

    • "Simulated App Launching" in Origami
    • 6:40
    • Free to Watch
    • Watched