Sketch — 用 sketch git 研究設計師版控流程

這篇要準備的工具如下：

• 新手觀念請進

猴子也能懂的 git

github desktop 安裝教學

sketch plugin 安裝教學

• 請安裝以下工具

sketch measure
sketch git

github desktop

• 安裝教學文

這有很詳細的安裝教學，所以我就不贅述了喔~

搞定设计版本控制！一份超详细的Sketch git插件使用指南

野薑會探索設計師版控流程，起因是

1. 超過 10 頁的大型專案，修改 issue 數量會超出人腦負擔，會開始漏接 issue
2. 窗口超過三位，需求會互相打架
3. 設計師作業一向都偏向封閉獨立，避免風格混亂，合作性不高，希望可以藉由工具，讓「交接」更容易
4. 專案尾端修改的 issue 都非常小，可以藉由修改前後比較，讓客戶一目瞭然

最後是我的私心，希望可以盡量使用工具，來減輕行政和PM的工作量 ( 目前都由苦主我擔任 QAQ )

所以就在社群朋友推坑下，開始研究 sketch git。

可以先玩玩看結果- 示範案例

下方 2-up | Swip | Onion Skin 都可以點選，用不同方式比較差異喔

因為教學文章講述很詳細，所以我只補充關鍵 step

1. 要先讓外掛追蹤文件

在下方會顯示成功訊息( 紅色框 )

接下來就會追縱所有的 Artboad

2. 做一些更動，比如說，24度改成 25 度

3. 存檔

4. commit

commit 可以想像是對這次更動做註解，可以寫上，「這是來自 PM 需求，原因是…」讓每一次更動都有根據

如果成功，下方會顯示訊息

來看一下被 git 追蹤資料夾發生什麼事情

產生一張圖片惹，這樣 git 就能比較。這個插件就是會自動產生 Artboad 圖片。

5. push 可以想像是「存檔」：先將註解和設計稿存檔，等等提交給設計總監

會跳出詢問框，問是不是要推到 github.com 這個網站？我們這裡選「允許」

在下方會顯示成功訊息

6. 看 github desktop 發生什麼事情。剛剛提的 commit 都列在此，但還沒提交給設計總監

7. sync : 提交設計稿給總監

按右上方的 [sync]，就會將設計稿上傳到 github 網站，如果檔案很大，會需要轉一陣子

8. 設計稿確認上傳

來到 github 看設計稿，是否有上成功上傳。剛剛提交的 commit 有成功顯示，成功！

9.比較畫面

點擊「PM需求：希望提高溫度」就能看到比較畫面

學會的好處是什麼？

目前還在嘗試中，歡迎有成功導入的朋友分享

可以想像好處如下：

1. 敏捷開發中，會更容易管理、追蹤來自各方的 issue

1. 風格可以用 branch 概念，各自分頭進行，再決定要不要合併

這領域會持續探索下去，也歡迎有興趣朋友一起討論喔！