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

Ginger
Ginger
Dec 27, 2016 · 4 min read

這篇要準備的工具如下:

  • 新手觀念請進

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

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade