Sketch3 行雲流水的 UI design 工具，有 Sublime Text 輕快的體驗!
前言：
以前使用 Windows 的時候，一直有耳聞搞設計的都熱愛用 Mac，而自己使用了 Mac 一陣子卻感覺不出來差異，直到最近遇到了 Sketch3！這套設計界的神兵利器，讓我眼睛為之一亮！
這顆「黃鑽石」可以說是設計界的 Sublime Text，都是很輕量、又支援超多外掛，用起來就是一整個行雲流水呀~
尤其在 web design 與圖形設計方面，平常使用幾乎可以取代 photoshop、illustrator。
Sketch3 亮點整理如下：
- 超輕量，讓你愛上的瞬開的體驗
- 外掛超多，各種神奇的套件都有
- 操作容易上手，行雲流水的境界
- 可自訂 symbols、text styles 方便 reuse
- 各種尺寸的圖片輸出
- 支援向量圖檔編輯
- 可快速切換像素預覽
- 常見的 web design 應用：
- mock up
- 開發 RWD 超方便，可快速切換在不同解析度下做預覽
- 還可以輸出 Asset、CSS
- 自建 template
- 搭配 Bootstrap 3 UI Kit 快速建立 mock up 教學
- 下載 Bootstrap 3 Vector UI圖示 https://bootstrapuikit.com/
- 可將 arborad 輸出到 zeplin
- 有支援 Google 官方 Material Design
推薦的 plugin
- sketch toolbox // 套件管理工具，必裝！之後其他套件都透過它來安裝
- Content Generator // 自動填充假文、假圖，方便 mock up 佔位內容
- Dynamic Button // button 會隨內文寬度調整
- sketch measure // 量測尺寸
- AEFlowchart // 畫流程圖
- Skala Preview // 丟到手機上預覽
- Sketch Notebook // 來標註設計稿說明有哪些圖，以及它們的名稱是什麼，讓RD開發起來更有效率。
- Sketch Commands // 許多常用的 workflow task 也可將素材輸出
- Sketch Dockpreview // preview your current artboard in the Dock
- sketch set line height // 行高
- Renameit // 重新命名
- Clear-styles // 清除樣式
- Swap-Fill-Border // 填滿邊框交換
- zeplin-sketch-plugin // zeplin
名詞解釋
簡單的作個名詞解釋方便快速上手，詳見參考資源：
- Page：像是沒有邊界的畫布，一個檔裡可分很多 Page，而 Page 裡可以放很多 Artboard。
Arboard：像是有尺寸的畫布 (就是 AI 的畫布)，本身有內建各種尺寸可選擇(eg. iOS、Android、RWD)。而內容元素只有在 arboard 1. 範圍內是可視的。 - Symbol：針對一個 group 設定成模組，方便之後 reuse。
常用快捷鍵：
- R 畫矩形
- O 畫圓形
- L 畫線
- T 插入文字
- cmd + g 群組化
- cmd + d 複製並貼上
- cmd + 加、減 放大縮小
- 點選元件 + option 快速檢視與其他元件的距
- UI將物件拖拉到桌面即可產生 png 圖
參考資源：
- https://leveluptuts.com 詳細影片教學
- https://sketchcn.com sketch 簡體中文網
- https://sketchshortcuts.com/ sketch 快捷鍵一覽表
- Sketch Keyboard Shortcuts
- 來用 Sketch 畫你的 UI 吧
- Plugins 清單彙整 算是半官方 github
Bobo內心旁白：「再見了 Adobe 家族！胖胖的軟體真的不是我的菜…」
