ProtoPie 教學 Day0：大綱與介紹
這一系列教學期望讓你在試用期結束時完整駕馭 ProtoPie 這個 Prototype 工具，內文都建立在自己對於工具與 ProtoPie 的理解上。
ProtoPie 新註冊就享有 10 天試用期，如果你已經有 Prototype 或已經註冊了，就別浪費試用期時間啦，趕快找尋自己感興趣或想學習的章節。
介面導覽
粗略介紹一下 ProtoPie 大致上的介面，幫助你快速熟悉它的介面。
中間控制區域
中間為 Prototype 畫面，呈現你安排的元件。
上方控制
上方可以 Import 設計檔案、新增元件等等，調整 Device （可以為 IphoneX 、Samsung 等裝置）；另外還可以開啟 Preview 即時預覽 Prototype 效果。
左側控制
左側控制 Scene、Layer 、Component 相關功能。
右側控制
右側控制 Trigger、Trigger 後的 Interaction 、元件的屬性（Color、Text 等等）。
製作 Prototype 的原理大概就是，在選取元件 → 在右側控制設定 Trigger 方式 → 右側控制新增互動（移動、屬性改變等等）。
匯入限制
下方點出一些「目前」使用 ProtoPie 需要注意的地方。
點擊上方工具列（由左至右第一個） Import 可以匯入設計稿，這裏只針對從 Sketch 匯入設計稿需要注意的地方。
ProtoPie 的 Import 是很智能的，它會保留 Sketch 中的圖層關係，一併加入至 ProtoPie 左側的 Layer 區域；舉例來說匯入一個包含底色的按鈕，文字加上底色的 Group 將會一同被匯入至 Pie ，但還是會有例外的。
點陣化
從 Sketch 匯入設計後，元件會被點陣化，點陣化後的元件除了 Text 以外，其他在元件 Pie 中無法被修改。
參考上圖舉例來說，Sign In 按鈕有一個白色色塊作為底色，Sign In 文字，在 Sketch 中被群組起來「SignInBtn」。匯入 Pie 中會變成 SignInBtn 的 container 中含有點陣色塊、Sign In 字樣，注意 Sign In 的圖示多了個 T，點擊這個元件後可以轉換為文字，這時候就可以在 Pie 中編輯按鈕的文字了。
遮罩 Mask 會被點陣化
在 Sketch 中設定 Mask 的元件匯入 ProtoPie 中會直接被點陣化！在 Sketch 中製作 Mask 常常會產生一個群組，但只要是 Mask 群組，整個群組都會被點陣化。
可以注意到在 Sketch 中有個 Mask 群組（左），匯入至 ProtoPie 後（右）直接被壓成一個點陣化圖。如果想在 ProtoPie 中製作遮罩，可以使用 container 製作。
陰影 Shadow 會被點陣化
在 Sketch 中元件若有陰影的屬性，陰影會連同色塊被點陣化。以剛剛的按鈕為例，我做了一個有大陰影的按鈕，陰影的屬性是加在按鈕的色塊上，匯入後發現陰影連同色塊一同被點陣化。也注意到陰影也會影響原本色塊元件的大小（看看下圖外框）。
💡注意：陰影勿設定在群組上
在 Pie 中的陰影屬性比較陽春，只能有一層陰影設定，無法像 Sketch 有多層陰影或是內陰影。 如果陰影的屬性是設定在群組上（SignInBtn），匯入時陰影會消失。因此如果你想要做出多層次的陰影，可以在群組內的元件設定陰影，匯入後可以保有多層陰影的設計。容器 Container
剛剛提到的陰影會造成元件大小改變，造成在畫面中定位不容易，這時候 Container 就發揮很大的效果。Container 像是群組，它的大小預設是內容物的大小總和，但可以調整為自己想要的大小。
舉按鈕為例，有重陰影的按鈕匯入後 Container 會保持在 Sketch 中的大小，這樣在移動元件時，可以用 Container 來移動，不受到陰影大小影響。
💡ProtoPie 的 Mask：
在 Sketch 中的遮罩匯入 ProtoPie 中會被點陣化，那麼如果還是想要在 ProtoPie 中製作遮罩怎麼辦？其實 container 就可以達到遮罩的效果，只要將想被遮罩遮蔽的元件放入 container ，在 container 的屬性設定（右側）勾選 Clip Sublayers 就會有遮罩的效果。章節列表
最後感謝各位的閱讀，不會特別要求要拍拍手，但更希望可以得到更多回饋。
如果有哪邊看不懂或是不清楚都可以留言，有哪邊說錯或是可以更好，也請儘管嗇留言討論。感謝大家！
