PM筆記：Sketch、Zeplin與Slices切圖
整理基礎知識與實作步驟。
前篇分享了Sketch Symbols的心得，這篇寫寫Sketch和Zeplin的協作流程。
適合聽過Zeplin這個軟體，但具體如何使用、和我一樣覺得有點模糊的讀者們；畢竟不是所有人都能從設計或工程角度實戰參與、但還是想知道呀呀～
每每聽到切圖，都會很好奇整個過程是怎麼走的？
趁著假日來動手做一遍，目標是聽到切圖、腦袋能出現些微的輪廓。
目錄Zeplin簡介Zeplin：建立新專案Sketch：建立練習檔案Sketch：上傳設計檔案到ZeplinZeplin：圖片素材下載（Export Assets）Sketch：Slices切圖工具延伸閱讀
Zeplin簡介
Zeplin是現在網頁設計、APP設計，幫助設計師和工程師協作的軟體/平台。
設計師從Sketch上傳設計稿後，相關標注同步完成，工程師可以透過頁面瞭解各個參數、以及下載需要使用的圖片檔案；對於客戶、產品經理、專案經理，也能透過Comment功能即時反饋，理解需要調整的頁面。
可參考官方的三分鐘影片。
Zeplin：建立新專案
註冊完帳號、電腦裝好Zeplin APP後，我們開始建立第一個專案。
有三種專案可以選擇Web/iOS/Android，差別在對應的標注單位不同，像是iOS使用pt、Android則是dp。
這邊選iOS專案。
進到下個頁面，左邊是各設計軟體上傳的步驟，有Sketch、Adobe XD、Figma、Photoshop CC；右上角可以替專案命名。
安裝Zeplin同時會裝好Sketch對應Plugin，等等可以從Plugin直接上傳。
Sketch：建立練習檔案
專注在流程，直接選Prototyping Tutorial當範例節省時間。
Sketch：上傳設計檔案到Zeplin
儲存檔案後，全選所有 Artboard (Cmd+Shift+A)，上方選單Plugins > Zeplin > Export Selected。
選擇剛剛建立的Project，等待上傳完成。
可以對指定圖片右鍵建立Section、Tag，方便快速篩選。
Zeplin：圖片素材下載（Export Assets）
我們在Zeplin裡，點擊夕陽這張圖，會發現右邊沒有素材可以下載 Ｑ＿Ｑ
工程師做到一半可能就會卡住，聊天室就會出現啊這邊沒有切到記得補啊。
回到Sketch，點擊圖片，觀察到右下角的Make Exportable是反灰的。
我們點擊Make Exportable後，在右上角+號再點兩下、把2x, 3x加上。
單選Watch List這塊Artboard上傳。
圖片素材就可以下載囉ヽ(●´∀`●)ﾉ～
Sketch：Slices切圖工具
切片就是從既有的畫板切出一個圖層。
我們從Flaticon下載這張夕陽圖，選128px尺寸。
擺在橋上，把剛剛兩個人蓋住
說是太陽看久一直覺得像發育很好的荷包蛋呢。
注意到Make Exportable是反灰的，我們上傳到Zeplin。
點選圖片，目前是無法下載的。
從選單叫出Slice工具，拿出我們的小刀。
移到圖片會偵測到太陽，點擊直接切圖；但如果是要這樣輸出，剛剛直接點選圖片就可以了，不用特別切。
我們選擇大一點的範圍，注意到切下去連背景都涵蓋進去了。
到左邊的圖層，把剛剛切片的範圍，和sunrise這張太陽圖群組起來；右邊會出現Export group contents only，勾選起來就會得到透明背景了。
開關Export group contents only選項，切換是否涵蓋剛剛切出的背景。
上傳Zeplin，就可以取得剛剛切出來的圖片大小囉(๑´ㅂ`๑)/
延伸閱讀
與工程師的協作之路-工具篇（Zeplin）-2019 iT 邦幫忙鐵人賽
不用再手抄一堆沒有畫面的MEMO貼在桌邊了喔！
網友分享協作流程，很適合從來沒用過Zeplin的讀者瞭解。
討論Export的格式，沒有提到Slice。
我喜歡透過分享幫助更多朋友，文章回饋、或是任何想法，歡迎透過臉書訊息與我聯繫。如果文章有所幫助，別忘了鼓掌灌溉、手指留香喔！ ✧*｡٩(ˊᗜˋ*)و✧*｡
