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

這篇要準備的工具如下:

  • 新手觀念請進

猴子也能懂的 git

github desktop 安裝教學

sketch plugin 安裝教學

  • 請安裝以下工具

sketch measure
sketch git

github desktop

  • 安裝教學文

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

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

  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 概念,各自分頭進行,再決定要不要合併

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