Origami 2.0 add interaction and animation to your designs

Learn Origami 2.0 and Quartz Composer to quickly add animation and interaction to your Mobile and Web designs
3.8 (17 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
741 students enrolled
Instructed by Adria Jimenez Design / Design Tools
67% off
Take This Course
  • Lectures 31
  • Length 2.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2015 English

Course Description

Course updated on 9th December 2016

Join more than 700 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 teaches 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 the full explanation of 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 coding, Origami and Quartz Composer are the tools to use if you are a visual person.

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

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

The course includes all you need to know from beginning 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.

What are the requirements?

  • Having a bit of design knowledge is recommended
  • I recommend to have already some prototypes or designs so you can start right after doing the course
  • Having a bit of design or prototyping knowledge is recommended
  • Is recommended to have at least used Quartz Composer before as this course asumes that you know what things like patches and compositions are
  • This course is about Origami 2.0 for Quartz Composer, not for Origami Studio

What am I going to get from this course?

  • Add interaction to apps/websites easily without code
  • Prototype apps/websites using Origami and Quartz Composer
  • Animate designs easily
  • Import designs into Quartz Composer in an easy way

Who is the target audience?

  • You should take this course if you want to learn how to prototype fast
  • Take this course if you want to start using Origami but you find the website tutorials quite hard to follow or the documentation not clear enough
  • You should take this course if you want to learn how to add animation and interaction to your designs and prototypes

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Get to know the tool and how you can benefit from Origami additions

Welcome to the course. Check this lesson to know what the course will be about and how you can benefit most from it!


Learn more about Facebook Origami


Origami works ove Quartz Composer from Apple so first let's have a look at the basics of Quartz Composer and how can you use it in integration with Origami.


Origami now has an option to export a Pop animation to Objective-C (iOS), Java (Android), or Javascript (Web). This lesson will teach you how you can use it.


Learn how to see your compositions on your mobile devices. This lesson will also teach you how you can see your compositions in a big screen.


Exporting the right images is the key to successfully creating a nice animation/interaction, so this is a key lesson. Learn how to think when exporting the right assets for your Origami composition.


The latest version has a very cool feature that you'll discover in this lesson. Real time update of your images! So you'll be able to update your designs and all of your compositions will be updated at real time without the need to re-import the images again after each modification.

6 questions

Check your knowledge by challenging yourself. How much did you retain from the interface? Do you know for sure how you should export your assets? Check it now!

Section 2: Origami Patches

The most basic patch. The layer path. Everything that should be displayed in your composition will end up in a layer so as it may seem really basic is very good to pay attention and learn it correctly.


Border layer patch was created for easily adding borders to your layers. This is useful for showing your clients where they can interact with the app.


Learn about the button patch and how you can easily create buttons that receive interaction without even the need of designs.


Learn how to toggle different animation states to be able to create animations with a transition.


The most basic animation. The classic animation will let you easily create animations with different curves.


Learn how you can connect remote patches together in this lesson.


Spring animations is the new thing to be, so learn how you can easily create them in Origami thanks to the new Pop animation patch.


Sometimes you need to add a delay to an animation so this patch will help you do so if you know how to use it. This lesson teaches how to use the delay in your animations.


A lot of the times you need to be able to scroll through your design, can be to show something or to allow the interaction by itself. As this is really needed, in this lesson you'll learn how to easily do it.


Sometimes you'll need to loop an animation for your prototypes. This lesson shows you how you can easily do it.


This is a really important lesson as you'll learn a tip that a lot of times nobody knows. How to connect multiple outputs to one input? As you may know, Quartz Composer doesn't let you do that, but thanks to this lesson you'll learn how you can do it.


Take a look at more than 100 patches available for you in Quartz Composer. Don't just limit yourself to Origami!

6 questions

Are you sure that you know how the patches work? Now it's the time to prove it.

Section 3: App flows and real use cases

The keyboard is a crucial part when you are working with forms or inputs and you want to showcase the use case of clicking on an input. In this lesson you'll create a reusable keyboard show/hide patch that you'll be able to use across your projects and compositions.


Creating reusable patches let's you boost your productivity as you'll be able to just add your patches without the need of creating them from scratch. In this lesson you'll see how to create the reusable keyboard patch so you can use it in the future in your compositions.


Some people think that is not possible to use Origami and Quartz just to connect simple screens and showcase your designs as it might be really complex. Well in this lesson you'll this that this is just a myth. This lesson will teach you how you can easily showcase your designs doing screen connections really quick.


This lesson will show you how to create a sliding menu animation like the so typical hamburger menu.


Learn how to present content to the user using a small and nice animation that will boost your animation designs!

Section 4: Exercises and challenges

In this this lesson we'll create a parallax animation effect with a combined bounce animation. You'll see how easy it is.


Now it's time to try it yourself. Check this exercise explanation and try to do it by your own. If you struggle with it just continue to the next lesson to see step by step how to do it.


Did you finish the exercise? Now it's time to check the solution explained step by step so you can follow and compare your approach with the one presented here.


This lesson will teach you how to revert the existing transition that we have so we can go back to our initial animation state.

Section 5: Course conclusion and extras
5 pages

Check and learn the Origami keyboard shortcuts that will boost your productivity once you learn them.


If you are here, that means that you successfully followed the course, congratulations! Check my last tip and start prototyping and adding interaction and animation to your designs!


Find in this bonus lecture a collection of resources to get inspired and learn from other people ideas. This is the quickest way to start with your animation prototypes, all for free.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Adria Jimenez, Software Engineer, Designer

I love creating software and teaching how to be more successful.

Currently I work at Xing creating software for millions of people. I've worked in other big and successful companies like Softonic, Honda or Fnac creating websites, apps, designs and software.

I really enjoy teaching people new skills so they can improve their 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.

I try to do my best to achieve the best result day by day.

Ready to start learning?
Take This Course