設計協作的升級——從共享組件庫到版本控制

隨著技術的成熟，多人協作工具一直在進步。例如 Git，Google Doc，Dropbox 等，這些工具既允許多人編輯，也可以實現版本的控制。然而圖形類的文稿因為其體積龐大，內容複雜，鮮有一套類似的解決方案。

Adobe 和 Sketch 的 Library 功能讓多位設計工作者可以共享一個組件庫，但也止步於此。多人合作的時候基本靠將雲盤上的文件夾層層嵌套——細緻的命名，許可權的劃分——來避免文件衝突或者核心文件被擅自修改等情況。於是出現越來越多「App 首屏」「App 首屏-張三修改」「App 首屏-李四修改」等冗餘的文件。

2017 年 Abstract（基於 Git 的設計文稿版本控制工具，目前僅支持 Sketch）的推出則在多人協作的方案上向前推進了一大步。本文簡單介紹了設計團隊如何在成長過程中進行協作升級。

Sketch Library —— 建立共享組件庫

你和小紅成立了瞎畫設計工作室，你們通過 Sketch 進行界面設計工作。為了保證風格統一和減少重複的設計工作，你將常用的設計模式抽象出來，整合成一份組件庫文稿放在共享雲盤上。但是隨著業務漸漸變得複雜，組件庫也逐漸變的豐富。當你往裡面添加一個新的 Input 樣式的時候，希望小紅的組件庫也能自動更新。正如 Adobe 的 Library 所做的一樣。

眾望所歸，Sketch 在第 47 版中推出了自己的 Library 功能，實現了共享組件庫的實時同步。實際上組件庫的同步依然是靠的我們自己使用的雲盤同步來實現，而 Sketch Library 的工作實際上是連接組件庫和設計文稿，為同步推送建立通道。

現在你們不需要再拷貝組件庫，只需在新建文稿的時候將組件庫添加為 Library 即可。當你在組件庫中新增或者更改了 input 樣式，小紅很快就會收到更新推送。而小紅可以預覽組件的前後變化，然後根據當前的情況判斷是否要立即更新。

兼容舊的設計文稿

在新的項目中你們可以通過 Library 協作了，但是舊的設計文稿怎麼辦？你們剛剛完成了 A 產品第一版的界面設計，已經積累大量的設計成果，如果在項目期內重建設計文稿，消耗太大。但是 A 產品下一個設計周期也很快就要開始，如果依然使用之前拷貝到本地的組件庫，將來很可能要同時維護兩套 Library，而且過程中很可能出現不一致的情況。這對設計和開發團隊都會造成困擾，大大增加了溝通成本。

能不能將舊的設計文稿也跟 Library 連接起來呢？一個叫 Library Symbol Replacer 的 Sketch 插件給出了解決方案。在 Sketch 中運行該插件然後選擇目標 Library，即可將設計文稿中的 symbols 替換為 Library 中的 symbols （通過識別名稱完全相同的 symbol）。如此一來，舊的設計文稿被激活，也可以與組件庫保持實時更新了。

Abstract —— 對設計文件進行版本控制

慢慢的，瞎畫工作室逐漸壯大，加入了新的一批設計師。產品的形態也日趨成熟，結構錯綜複雜，你們不能只通過向口頭討論的方式跟其他人協作了，你們需要一個更加規範的流程：每個產品應該有一份穩定統一的設計文稿用於對外輸出，而團隊內部對這個項目進行的新增和更改都應該有跡可循，並且在必要的時候可以回退到某一個版本。

是不是聽起來跟程序員同事們通過 Git 協作的方式一模一樣？2017 年推出的 Abstract 就實現了這件事情——對設計文稿進行基於 Git 的版本控制，並且能夠完美配合 Sketch 的 Library 功能。關於 Abstract 的具體使用方法在此不贅述，可以參考文章：版本控制工具 Abstract 是如何提升設計團隊協作效率的？。

簡單來說，在 Abstract 上使用 Sketch 可以讓我們在保持組件庫（Library）同步更新的基礎上，實現對任意文稿進行多人協作的版本控制。參見下圖：

兼容舊的設計文稿

此時我們再次面臨一個問題：如何將舊的 Library 和設計文稿遷移到 Abstract 上？正如前文所提到的，Library 功能是通過連接組件庫與設計文稿的方式進行同步，而上傳到 Abstract 後 Library 和設計文稿會被分別放一個新的地方。Sketch 找不到 Library 的新路徑了，鏈接就會斷開。

同理，我們可以再次使用上面提到的插件 Library Symbol Replacer 來修復鏈接：先找到 Abstract 存放 Library 的新路徑，然後通過這個插件將文稿鏈接到新路徑的 Library，進而修復鏈接。最棒的地方在於雖然選中的是某一個特定版本的 Library 文件，但當 Library 版本發生更新的時候，Abstract 始終會自動鏈接到最新版本。具體的操作步驟可見：如何將 Sketch 文件及其 Library 無損遷移到 Abstract。

進階 —— 靈活使用 Abstract 和 Library

一開始你和小紅將設計文稿與 Library 放在同一個 Project 內。但是瞎畫工作室生意紅火，你們接到了新產品 B 的設計項目。產品 B 是你們接手的第一款移動端產品，顯然不再適合與桌面端的產品 A 使用同一個組件庫。

這時你可以把 Library 進一步提煉和拆分。例如將工作室的 Brand Guidelines 抽出來作為全平台通用的 Library，在設計文稿中通過 link 的方式調用。然後把桌面端應用的組件庫與產品 A 放到同一個 Project 下，把移動端應用的組件庫與產品 B 放到同一個 Project 下。如此一來，Library 和設計文稿各自的版本、commit 信息被隔離開，版本管理更加獨立和清晰。

此外，Abstract 還提供了版本的對比和評論功能，幫助設計師核查和討論。雖然目前 Abstract 仍在 beta 階段，有一些待優化的地方，例如預覽圖載入較慢，Library 不能打版本號等，但仍在以肉眼可見的速度逐步完善和優化。總體來說是一款非常值得嘗試的產品，大家可以註冊免費的個人賬戶進行體驗。