Course updated on 26th January 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.
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
Grab all course resources from here
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 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.
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!
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!
Are you sure that you know how the patches work? Now it's the time to prove it.
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!
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.
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.
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.