#搭配 sketch & zeplin 製作 iOS 的健康 App 畫面
Published in
6 min readJul 27, 2021
主要步驟：
- 下載資源：Sketch、Zeplin、iOS畫面的Sketch檔
- Sketch ➡ Zeplin：將圖檔輸出至Zeplin
- Zeplin ➡ Xcode：從Zeplin將顏色、轉好1x,2x,3x的圖檔輸出至Xcode
- Xcode + Zeplin：在Xcode製作畫面，並參考Zeplin的圖片資訊，以知準確的位置、大小等資訊
下載資源
Sketch ➡ Zeplin
打開下載好的 iOS 11 GUI for iPhone X — Design Files.sketch
並且找到你想模仿的頁面
在這還要進行一步最重要的步驟
點選你要需要的圖示，再按下右下角的MAKE EXPORTABLE
做好以上步驟點選 Plugins -> Zeplin -> Export Selected…
Zeplin ➡ Xcode
點選 Assets 查看剛剛選擇的照片
點選 PNG 下載圖標，Export到創建好的專案內
問題提醒
我發現底部的icon比較難找取圖片，也發現就算用了Sketch也無法單獨下載下來，只好上網下載學長姐的Xcode抓取圖檔，所以等等會有步驟如何抓取我的icon圖檔打開Assets.xcassets查看剛剛匯入的圖片
如果發現 icon 沒有你所需的圖標時，請使用右鍵點先選你要的圖片，按下Show in Finder，找到你缺少的圖標名稱檔案，直接拖入你的專案內即可
開始製作APP
製作底部 icon 時，我們會發現顏色會不太一樣
利用 Zeplin 找出該圖標的 RGB
點選該圖示後右下角會顯示該圖標的RGB，你可以選擇把RGB數值記起來，或是輸出該顏色到你的專案
如果選擇輸出至另一專案，請點選顏色右邊的箭頭，進到Color Palette之後，再點選右上角的箭頭 Export 到你的專案
打開專案的Assets.xcassets查看剛剛匯入的顏色
完成修改圖標顏色
製作APP Icon
將想要製作成APP Icon的圖示丟入此網站
點選前兩個勾即可按下Generate
先將xcode內的 AppIcon 刪除，再來將下載的檔案解壓縮，找到 AppIcon.appiconsety 資料夾，將其拖入 Assets.xcassets
APP成果展示
