設計檔 版本控制流程建立

為何要花時間處理版本控制?

”版本控制“ 的概念我是在之前寫程式時與其他工程師 co-work 所學到的,基本上就是當眾多人合力開發同一個專案時,需要有個工具來同步大家的進度,這個時候最受歡迎的大概就是“分散式版本控制”的方法,而較為人所熟知的服務也就是 Github 以及 Gitlab 囉。

通常設計師比較少機會去共同開發一個專案,畢竟維持同一個人的產出也相對的可以維持風格的一致,而每個人的設計方式又多少會有些不同,這也或許是設計師對於這塊的需求直到了最近才比較被重視,出現了相關服務

此篇文章會分享我自己在工作時的 Git 流程,雖然我目前所處的團隊不會需要與多位設計師共同開發一個專案,但是我認為 Git 還是能夠幫助我對於檔案的管理以及產品發展脈絡的紀錄有很大的幫助,對於之後要加入專案的設計師來說也會比較容易進入狀況。

如何開始

那麼,要怎麼開始使用 Sketch 來做 Git 呢?

這篇 野薑開業日記 所寫的文章寫得很詳細可以參考:

對、寫得很清楚了!那我到底還能寫什麼呢!!

此篇文章主要則是分享我自己在工作專案中使用的流程規劃方法,以及介紹與連結文章中不ㄧ樣的 Git gui 軟體 Souce Tree ( 因為被 Git Desktop 陰過很多次… )且因為我所處的團隊其實是維護固定幾個大型專案,在圖面設計及與 PM 溝通都是透過 zeplin , 也因此不需要特別去產生 Pretty diff ,省去這項手續,只透過版本控制來追蹤以及備份檔案!

Step.1 流程文件建立

在一切開始之前,透過建立文件來思考自己要透過怎樣的組織規劃串起來,以我自己為例,公司目前主要有兩個產品、而每個產品又有不同系統平台,但又怕開太多 Repo 會不易管理,因此是開一個 名為 “ Design ” 的 Repo,然後再透過新增 Branch 的方式去做產品線的區隔!

以我自己的工作經驗為例的 git 流程

透過一個 Repo ,切分出 各產品的 Branch 做開發以及紀錄,在一個大段落(發版本、推上線等)再把檔案也放進 Master 保存。

為什麼會有一個 iconfont 的 branch 呢? 可以參考我之前的文章:

Step.2 Git gui SourceTree

其實我一開始也是使用 Github Desktop ,但是發現它的介面實在是太不直覺了,以下提供對照圖給大家看:

左邊是 Github desktop ; 右邊則是 Sourcetree

好的,來說說我覺得 Github desktop 不直覺的原因

  • 沒有辦法一眼看出所有的 Branch及 總覽 commit
  • 按鈕的語意不清,例如: Sync 這個詞,到底是從我的電腦 Sync 到雲端,還是從雲端 Sync 到我的電腦呢?
  • 雖然這些都可以靠習慣解決,但是我遇過 Commit 後的檔案跟我玩捉迷藏的事件、這個可不是開玩笑的呀! 還沒 Push 上去就算了,連桌面端的檔案也不知道給我藏到哪裡去了,最後是透過下 Comment line 的方式解救回來,應該是 Gui 當掉了。

而前面兩個原因我都在 Sourcetree 得到了解決,第三點則是目前還沒在 Sourcetree 上面遇到(也可能是我之前運氣比較差,看工程師同事用的好好的。)

ok, 那就來簡單介紹一下 Sourcetree 的使用方法吧!

  1. 下載 SourceTree
  2. 登入帳號後,透過 URL Clone 你自己的 Repo 下來
記得左上角的 tab 要切到 remote !
  • URL 可以從 github 專案的 clone 按鈕取得(記得切到 https 選項)

3. clone 後到本機端你指定的資料夾位置,就可以看到檔案了(當然如果你是新建一個 repo, 資料夾會是空的,這時候你就可以把想要版本控制的檔案放進去並且寫個 commit 然後 push 上去啦)

簡述一下程序大概是john:

Push

編輯檔案告一段落 -> commit(寫下這次斷點描述)-> push (推至雲端)

Pull

發現雲端檔案有更新 -> Pull 至本地

這邊要注意的是,如果你的專案切分方法也跟我一樣是使用 Branch 來切分,要確認目前是否在正確的 Branch 哦!

切換 Branch 時,本地檔案的資料夾也會跟著 Switch 哦!

Step.3 Git commit/push/ 時機

由於跟工程師的檔案相比,我們的檔案相當肥並沒有辦法隨時隨地的 push,所以就我目前而言都會是每天下班時或有重大更新時才會 Push , 而 commit 時所需要填寫的文字資訊相當重要,是之後回頭看時判斷狀況的依據,所以要好好寫哦(最好是能夠建立一套文字模板來給大家照樣造句,也會讓團隊在檢視時的速度提高)!

以上就是我如何把 Git 融入我的工作流程,希望與大家交流是如何做版本控制的,有問題或建議,都歡迎留言討論哦!

看著 Branch 慢慢長大也是種小確幸呀!

衍生應用

版本控制最大的功能還是在於多人合作的專案中保持進度的一致性,原本設計師也因為設計稿時常動輒好幾十 MB 傳輸不易,於是檔案的交流更新溝通成本也很高,但是這項問題在 Sketch 升級到 v47 得到了解決!

Sketch 在 v47 透過 Libraries 這項功能,讓我們可以把整個專案的 Symbol 整合在一個檔案並且連結載入,可以想像他是一個 Style guidline 元件庫,如果我們能將產品的 Libraries 透過版本控制紀錄,再多人協作時只要有人更動到 Libraries 則所有設計師可以透過 Git 同步、讓整個設計團隊的開發流程更加順暢且保證握有的設計資源是一致的!

而也因此我們不在需要把大型檔案的所有頁面都放在同一個 sketch 檔案,依據頁面或資訊架構去切分檔案,不但在版本控制時的傳輸時間減少、也能降低電腦因為圖檔過於肥大而速度降低的情況發生, Sketch libraries 真的是解救眾 UI Designer 的強大更新啊!(雖然要把舊有的大專案拆分成小檔也是一番功夫,但我相信帶來的效益是絕對值得的!)

--

--