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

Project Description

Build an image lightbox gallery with Origami and Quartz Composer

ASSIGNMENT

Lightbox prototype and design with interactions and animations.

At the end of the course you'll build a complete lightbox gallery with animations and everything created by yourself without coding, just with Quartz Composer and Origami.

DELIVERABLE

Upload your framer project or share the framer link so the exercise can be reviewed. A completed project may include:

  • complete lightbox
  • more than proposed images
  • additional behaviours

Check out the attached composition file to see an example of deliverable

Student Projects