Origami 2.0 add interaction and animation to your designs
3.6 (19 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.
761 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Origami 2.0 add interaction and animation to your designs to your Wishlist.

Add to Wishlist

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.6 (19 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.
761 students enrolled
Created by Adria Jimenez
Last updated 1/2017
Current price: $10 Original price: $45 Discount: 78% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 2.5 hours on-demand video
  • 2 Articles
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
  • 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

Course updated on 10th July 2017

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.

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
Compare to Other Origami Courses
Curriculum For This Course
32 Lectures
Get to know the tool and how you can benefit from Origami additions
8 Lectures 24:33

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

Preview 02:29

Learn more about Facebook Origami

About Facebook Origami for Mac

Grab all course resources from here

Course Resources

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.

Learn how to use new Origami Quartz Composer features

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.

From Origami to Code, exporting to code

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.

Origami live and presentation mode

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.

Learn how to export the right assets for your compositions

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.

Exporting your designs and updating them real time

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!

Interface and exporting/importing your designs
6 questions
Origami Patches
12 Lectures 50:30

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.

The basic layer, knowing the most useful patch

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.

Adding a border to a layer

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

Preview 05:06

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

Switching states to create animations with a transition

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

Preview 02:15

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

Connecting patches remotely

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.

Spring animations and code export

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.

Preview 04:08

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.

Adding scroll interaction to big designs

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

Looping an animation

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.

Connecting multiple outputs to one input

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

Note on patches

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

Get to know your patches
6 questions
App flows and real use cases
5 Lectures 34:25

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.

Showing and hiding your keyboard when needed

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.

Creating a reusable keyboard patch

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.

Connecting app screens to show user flows

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

Sliding menu animation

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

Presenting the content to the user with an animation
Exercises and challenges
4 Lectures 28:25

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

Application parallax effect

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.

Creating a lightbox exercise explanation

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.

Creating a lightbox solution

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

Lightbox solution, dismiss the lightbox
Course conclusion and extras
3 Lectures 03:20

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

Origami Keyboard shortcuts
5 pages

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!

Course overview and thank you

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.

BONUS Lecture: Resources for Prototyping Inspiration and Ideas
About the Instructor
Adria Jimenez
3.9 Average rating
924 Reviews
13,309 Students
11 Courses
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, which 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.