Origami 2.0: Add Interaction and Animation to your Designs

Adria Jimenez, Software Engineer, Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
29 Lessons (2h 20m)
    • 1. Welcome to the course

      2:29
    • 2. Course Resources Download

      0:32
    • 3. Learn how to use new Origami Quartz Composer features

      3:52
    • 4. From Origami to Code, exporting to code

      3:51
    • 5. Origami live and presentation mode

      3:38
    • 6. Learn how to export the right assets for your compositions

      2:58
    • 7. Exporting your designs and updating them real time

      7:28
    • 8. Adding a border to a layer

      2:56
    • 9. The basic layer, knowing the most useful patch

      3:22
    • 10. Creating fast buttons for adding interaction

      5:06
    • 11. Switching states to create animations with a transition

      4:59
    • 12. Animating our transitions with a classic animation

      2:15
    • 13. Connecting patches remotely

      5:46
    • 14. Spring animations and code export

      3:11
    • 15. Delaying your animations in time

      4:08
    • 16. Adding scroll interaction to big designs

      6:17
    • 17. Looping an animation

      3:47
    • 18. Connecting multiple outputs to one input

      7:10
    • 19. Note on Patches

      1:33
    • 20. Showing and hiding your keyboard when needed

      7:30
    • 21. Creating a reusable keyboard patch

      3:31
    • 22. Connecting app screens to show user flows

      6:08
    • 23. Sliding menu animation

      9:14
    • 24. Presenting the content to the user with an animation

      8:02
    • 25. Application parallax effect

      9:57
    • 26. Creating a lightbox exercise explanation

      1:25
    • 27. Creating a lightbox solution

      9:00
    • 28. Lightbox solution, dismiss the lightbox

      8:03
    • 29. Course overview and thank you

      2:09