3 Step Overview of Facebook Origami

1. Import screens ?  2. Add interactions and transitions ?  3. Export to code

1. Import Screens

  • Export from Sketch, then drag and drop into Origami:
  • ‘Live images’ sync with Sketch, so Origami imports update with changes in Sketch

2. Add Interactions and Transitions:

  • It works by hooking ‘patches’ together, with values that create interactions:
  • Link different ‘patches’ together to create different effects, such as transitions:
  • Create a range of interactions with Origami within Quartz:

3. Export to presentation or code:

  • Export to presentation mode:
  • Export to code for developers:
    Screen Shot 2016-09-14 at 15.02.11