早在Facebook推出Facebook Home时，相信强大的原型工具Quartz Composer就进入了很多设计师的法眼，无须编写代码就可以输出细腻丰富的动画，这个太刁了，和大家一样，彼时我也信誓旦旦励志要学会这个玩意儿，于是� ��始参考教学视频摸索，甚至拿着Quartz Composer的Guideline企图翻译，结果发现并不是那么简单。于是学QC这件事情就一直一直搁浅，直到Facebook又推出了Paper，有了Origami这个插件，QC的门槛瞬间降低了很多，终于，感觉自己入！门！了！！尤其是和Sketch联动，做demo真是方便了很多。这里按照自己的理解参考各种资料的总结对Origami整理了一份入门篇文档，真的可以帮助零基础的同学入门，欢迎同样在研究的同学一起探讨，有不对的地方求指正~

扩展阅读《推荐移动UI/UX设计师和PM使用的原型工具》

Origami官方网站下载页面：http://facebook.github.io/origami/

基本概念

首先说一下“模块”（patch），模块是QC里面最基本的元素，不同的模块实现不同的功能，要搭建一个原型，实际上就是把不同的模块按照逻辑像搭积木那样拼装的过程。

模块可以简单区分为这样两类：圆角和方角。

圆角是最普通的模块，而方角的模块叫做“宏”（Macro），可双击进入详细编辑。（我把它理解为文件夹）

模块还会有颜色的区别，蓝色的模块是输出模块，在画布中可以被看到；黑色模块是最常见的状态；紫色模块表示模块内部还有其他子模块。

模块和模块之间用连线的形式拼接起来，模块左侧是输入接口，右侧是输出接口，将A模块右侧的输出点连接到B模块左侧的输入点，即可将A模块的结果输出到B模块。

下图是最简单的图片放大缩小的例子，在数值变化的地方给图片大小一个初始值和结束值，就可以简单的实现点击图片放大缩小的效果了~~~~

小试牛刀

搞清楚基本概念和基本逻辑之后，就可以上手试试了。

我们先新建一个Origami file。

如下图，会弹出左右两个窗口，这是Origami默认的文件，由此也可以看出Origami为移动而生~ 第一个patch可以控制右侧手机的样式、横屏还是竖屏等等，第二个patch是方角的，也就是上面说的宏（Macro），双击它就可以将我们想要设计的内容放在手机里面了。第三个patch是蓝色的显示层。