Origami 2.0 add interaction and animation to your designs

Learn Origami 2.0 and Quartz Composer

Join more than 600 students in this course to learn how to easily and quickly prototype, add interaction and animate your mobile and web designs with Facebook Origami and Quartz Composer without coding.

This course will teach you step by step how you can use Origami to create prototypes and add animation to your designs. If you already tried to read the documentation on the website and you find it quite confusing, then this course is for you.

With this step by step course with full explanation on how you can use the different patches and how you can combine them to create the animation or the interaction you were looking for. All the lessons include downloadable material that you can download and play with.

Forget about other tools or about coding, Origami and Quartz Composer are the tools to use if you are a visual person.

Learn how to quickly use Origami by following my method and be ready to create designs, interactions and animations fast and in a very easy way.

What are you getting with the course?

  • Lifetime access
  • 29 HD video lessons
  • Step by step guides
  • Downloadable materials and exercises
  • More than 3 hours of content

Join the new era of designers, start showing your designs with interactions and animations and look at your clients reaction!

Course outline

    • Get to know the tool and how you can benefit from Origami additions
      • Welcome to the course
      • Learn how to use new Origami Quartz Composer features
      • From Origami to Code, exporting to code
      • Origami live and presentation mode
      • Learn how to export the right assets for your compositions
      • Exporting your designs and updating them real time
Expand the complete course outline
  • Origami Patches
    • The basic layer, knowing the most useful patch
    • Adding a border to a layer
    • Creating fast buttons for adding interaction
    • Switching states to create animations with a transition
    • Animating our transitions with a classic animation
    • Connecting patches remotely
    • Spring animations and code export
    • Delaying your animations in time
    • Adding scroll interaction to big designs
    • Looping an animation
    • Connecting multiple outputs to one input
    • Note on patches
  • App flows and real use cases
    • Showing and hiding your keyboard when needed
    • Creating a reusable keyboard patch
    • Connecting app screens to show user flows
    • Sliding menu animation
    • Presenting the content to the user with an animation
  • Exercises and challenges
    • Application parallax effect
    • Creating a lightbox exercise explanation
    • Creating a lightbox solution
    • Lightbox solution, dismiss the lightbox
  • Course conclusion and extras
    • Origami Keyboard shortcuts
    • Course overview and thank you

The course includes all you need to know from start to end.

This course is targeted for designers, UX, freelancers, developers or all kind of people that would like to design, prototype or add interaction in an easy and up to date way.

Don't lose more time with static designs and join the animation and interaction era.

Origami 2.0 add interaction and animation to your designs

$49.00 USD

Meet your instructor


Adria Jimenez

Adria Jimenez

I love creating and designing apps, webs and teaching how to be more successful with that.

I've work at Xing, Softonic, Honda, Fnac and several other companies creating software for millions of users.

I really enjoy learning and teaching new skills to improve others lives.

All my life I've been surrounded by computers. As a child, my father - who was a programmer back then - introduced me to the world of computing, that marked me forever. Years later, after hours and hours in front of computers, I am dedicated to my passion: code and design.

Every day, I try to do my best to achieve the best result.

I created Skills Airport to share my knowledge with people like you.