最近大熱的Origami 2.0，同學們應該都有所耳聞了，今天@大蔚陳 帶來一個入門的介紹+教程，附上使用體驗，感受下

隨著互聯網尤其是移動互聯的急劇發展，設計變得更受重視，于是越來越多的產品經理和設計師開始尋找簡單好用的工具。

2014年可謂是原型工具爆發的一年，各類工具層出不窮。我也嘗試用過很多種，從代碼級別的 Framerjs，到 Quartz Composer，當然我最喜歡的其實還是 Xcode 和 Keynote。

Origami 是 Quartz Composer 的一個庫。Facebook 的設計團隊在設計過程中就是用它來進行設計的。前不久 Origami 2.0 的發布，大大降低了學習難度，而且還可以在手機上實時交互，讓這個工具開始火熱起來了。

Facebook 官方也發布了 Origami 2.0 的樣例和教程，本篇主要源自于 Introduction to Origami 的視頻教程，所以我自己做了一遍，另外增添了一些內容。

好的，廢話不多說，看干貨。

初步介紹

打開 QC，創建新 Origami File。

左邊是編輯區，右側是 Viewer，可以點擊 Resize to third 三分之。

在編輯區的右側有 Viewer Patch（模塊）

添加資源

先簡單介紹一下模塊的概念。QC 中模塊分為幾種：

方角的，四角是尖的稱之為 Macro（宏），可以雙擊進入詳細編輯，類似于程序中函數的概念（ 函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼塊）。你在這個 View （視圖）里，還可以包含其他的 View（視圖），實在不理解，就把他當做圖層組吧。你可以雙擊進入詳細編輯，在工具欄中點擊向上箭頭哪個按鈕（底部寫著 Edit Parent）可以返回上一層。

圓角的是普通模塊。

藍色的是輸出模塊，會在 Viewer 中看到。

紫色模塊則代表該模塊內部還有其他模塊。

添加資源很簡單，只需要把對應的圖片文件拖到 Editor 區域中即可，會自動創建一個圖片模塊以及圖層模塊。

圖層模塊

圖層是一個顯示類模塊，可在屏幕上顯示。你可以設置它的 X/Y/Z Position，你可以雙擊輸入數值，也可以長按后左右拖動變更數值。同時還可以選擇 Anchor Point（錨點）是左上開始還是居中等。

你也可以點擊 Mask Image，或者改變不透明度，縮放等。