Facebook 獨立應用 Paper 上架即獲極高評價，其極簡無按鈕菜單的交互體驗背後，功不可沒的是內部孵化 9 個月的 Origami——基於 Quartz Composer (QC) 的插件，讓設計師零代碼快速構建高保真動態原型，實時預覽手機端互動，所有動畫先在 Origami 成型再由工程師還原開發。

為什麼需要 Origami？

APP 趨勢：動態設計爆發。靜態原型圖無法傳達動效細節，設計師急需更好交互工具。Origami 應運而生。

安裝三步走（需 Mac）

1. 準備一台 Mac。
2. 安裝 Quartz Composer（Apple 官方開發工具）。
3. 安裝 Origami 插件（官網 facebook.github.io 下載）。

Origami 核心自定義控件

控件	功能
Switch	開關邏輯
Scroll	圖片滾動
Bouncy Animation	彈簧物理動畫
Classic Animation	傳統緩動曲線動畫
Transition	0-1 數值驅動輸出起止值
Color Transition	兩色淡入淡出
Image Transition	兩圖淡入淡出
Interaction 2	圖層點擊響應
Layer	圖片顯示於屏幕
Text Layer	文字顯示於屏幕
Button	自定義標籤/背景，接 Interaction 2 實現點擊
Hit Area	可點擊區域，同接 Interaction 2
Phone	繪製手機框（iOS/Android/WP）
Timer	定時觸發狀態變化
Counter 2	數值增減實現循環

Origami 為 QC 帶來的 7 大改進

1. 支援 Retina 顯示器
2. 拖入圖片自動包裹 Layer
3. 參數窗口支援鍵盤上下鍵切換
4. 禁用控件顯示灰色
5. 預覽窗口原生全屏支援
6. 刪除分流器時連接線保留
7. 其他 Bug 修復

官網提供 4 個範例下載，跟著學即可掌握神奇動效製作方法。Origami 或將對 Photoshop 在動效原型領域構成威脅，趕緊下載嘗試！