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 Videos (2h 20m)
    • Welcome to the course

      2:29
    • Course Resources Download

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

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

      3:51
    • Origami live and presentation mode

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

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

      7:28
    • Adding a border to a layer

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

      3:22
    • Creating fast buttons for adding interaction

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

      4:59
    • Animating our transitions with a classic animation

      2:15
    • Connecting patches remotely

      5:46
    • Spring animations and code export

      3:11
    • Delaying your animations in time

      4:08
    • Adding scroll interaction to big designs

      6:17
    • Looping an animation

      3:47
    • Connecting multiple outputs to one input

      7:10
    • Note on Patches

      1:33
    • Showing and hiding your keyboard when needed

      7:30
    • Creating a reusable keyboard patch

      3:31
    • Connecting app screens to show user flows

      6:08
    • Sliding menu animation

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

      8:02
    • Application parallax effect

      9:57
    • Creating a lightbox exercise explanation

      1:25
    • Creating a lightbox solution

      9:00
    • Lightbox solution, dismiss the lightbox

      8:03
    • Course overview and thank you

      2:09