高手進(jìn)階技巧！全方位深入理解 Sketch 庫上

在 Sketch 47 中引人的庫（Library）功能，這次更新改變了設(shè)計團(tuán)隊(duì)工作體例和流程。庫在設(shè)計團(tuán)隊(duì)維護(hù)一個設(shè)計體系或風(fēng)格指南上，起到特別很是緊張的作用，可以給團(tuán)隊(duì)帶來更加高效工作體驗(yàn)。

越來越多的設(shè)計師和團(tuán)隊(duì)使用 Sketch 作為重要的設(shè)計工具，得益于浩繁插件和第三方應(yīng)用，即使在沒有技術(shù)支持的情況下也能解決一些常見題目。然而每次引入大功能時，也會帶來許多坑。事實(shí)上有些 UI 設(shè)計團(tuán)隊(duì)的向?qū)В遣惶粗胤椒ê土鞒痰?，這種團(tuán)隊(duì)選擇 Sketch 大多是為了更快速出圖，在如許的團(tuán)隊(duì)中設(shè)計師就要艱辛地踩各種坑。

作為一個寫 Sketch 插件的設(shè)計師，特別很是能理解這些題目給團(tuán)隊(duì)服從帶來的影響。在 Sketch 47 剛發(fā)布時，我便開始在我的 Automate 插件中增長一些庫相干的功能，久而久之便對庫有了比較深入的了解。這篇文章重要介紹高級的信息，可以幫助設(shè)計團(tuán)隊(duì)更好的使用 Sketch 庫，并解決一些復(fù)雜題目。假如必要基礎(chǔ)教程，請查閱官方文檔或其他網(wǎng)上的一些文章。

這一系列的文章分為上中下三部分，上部重要介紹基礎(chǔ)概念和庫的托管方案；中部重要針對庫管理者，內(nèi)容包括組件命名、庫維護(hù)等；下部則是針對團(tuán)隊(duì)中相對高級的庫管理者，使用腳本解決一些復(fù)雜題目。

一、基礎(chǔ)概念

1. 模版與庫

模版（Template）與庫（Library）本質(zhì)上并無區(qū)別，都是一個通俗的 Sketch 文件，除了低版本（低于 43）Sketch 建立的文件無法直接加入到庫面板中外，任何帶有組件（Symbols）的 Sketch 文件都可以直接加入庫面板。

偶然模版特指被加入到菜單 「New From Template」 下或表現(xiàn)在 Welcome 界面上的那些文件?？梢允褂?「Save as Template…」 菜單或者直接將文件復(fù)制到 「~/Library/Application Support/com.bohemiancoding.sketch3/Templates」 文件夾內(nèi)。

庫則是指被添加到 「Preferences – Libraries」 面板下的那些文件，它們沒有同一保存的地方。

在沒有引入庫功能時，設(shè)計團(tuán)隊(duì)使用模板文件來協(xié)作，但 Sketch 并未提供一種文檔內(nèi)容更新機(jī)制，只能依靠一些插件將文檔通過組件名稱匹配來替代成另一個文件的組件，但這對組件圖層命名要求嚴(yán)酷，也沒有可視化對比。庫功能解決了這種公共內(nèi)容更新或替代的需求，這一點(diǎn)在團(tuán)隊(duì)協(xié)作中特別很是緊張。

庫并沒有庖代模版的意思，從界面上只能訪問到庫文檔內(nèi)的組件，也就是庫文檔內(nèi)的畫板（Artboard）或不在畫板內(nèi)的圖層，對于庫現(xiàn)實(shí)上沒有太多用處的，有些庫是程序生成的，這種情況組件在畫布上的位置也沒有太多講究。模板文檔則會帶有一些實(shí)例或說明，模板內(nèi)的組件也可以都替代成庫的外部組件，模板也可以為庫提供直觀的檢索、示例演示或者作為一個快速搭建界面的框架。

2. 庫的類型

內(nèi)置庫（Internal Libraries）是指隨 Sketch 自帶的庫，目前就是 iOS UI Design 這個庫，文件保存在 「/Applications/Sketch.app/Contents/Resources/libraries/iOS UI Design.sketch」，假如必要研究這個文件必要復(fù)制到其他地方再打開。

用戶庫（User Libraries）就是用戶從庫面板上的 「Add Library…」 按鈕上添加的庫。

在 Sketch 49 以后，增長了一種新的類型，長途庫（Remote Libraries），內(nèi)置的必要下載的 Apple iOS UI 也屬于這個類型。目前這個功能僅開放了從 Sketch Cloud 添加庫，用戶必要注冊 Sketch Cloud 上傳文件，分享網(wǎng)頁鏈接給使用者，使用者網(wǎng)頁上的 「Download – Add Library to Sketch」 菜單添加到庫面板。

這三種類型在庫面板上沒有顯明的視覺區(qū)分，可以簡單地通過右鍵菜單（或庫面板左下角齒輪圖標(biāo)下拉菜單）來確認(rèn)屬于哪一類型。內(nèi)置庫無法被移除也無法打開，可以被禁用；長途庫無法使用 「Show in Finder」 和 「Open …」菜單，來自 Sketch Cloud 的長途庫會有 「View in Sketch Cloud」 菜單；用戶庫則都有這三個菜單。

這三種庫在使用上并沒有特別很是大的差別，只是添加體例不同。來自內(nèi)置庫和長途庫的組件，使用者無法在庫中修改，雙擊這種組件時只有一個選項(xiàng) 「Unlink from Library」。

而來自用戶庫的組件，則有兩個選項(xiàng) 「Unlink from Library」 和 「Open in Original Document」?？梢赃@么理解長途庫適合集中管理的庫，用戶無法修改而同一由管理者修改，而用戶庫則適合必要協(xié)作修改的庫，現(xiàn)實(shí)上用戶可以操作的只有效戶庫和長途庫兩種，下文會細(xì)致說明這兩種類型的庫如何同步。

3. 組件實(shí)例、組件母版與庫組件

組件母版（Symbol Master）是一種特別畫板，能夠引出另一個分身稱為組件實(shí)例（Symbol Instance），分身只有單一的圖層，但可能會有不同表面。組件實(shí)例在圖層面板有兩種圖標(biāo)，旋轉(zhuǎn)箭頭圖標(biāo)透露表現(xiàn)文檔內(nèi)的實(shí)例，而索鏈圖標(biāo)則透露表現(xiàn)來自庫的實(shí)例，這種來自庫的實(shí)例無法在當(dāng)前文檔修改母版，許多情況就稱為庫組件（Library Symbol）。

為了區(qū)別文檔上的組件母版和庫組件，文檔上所有的組件母版薈萃稱為內(nèi)部組件（Local Symbols），文檔上所有庫組件的薈萃通常叫外部組件（Foreign Symbols）或?qū)氲慕M件（Imported Symbols）。

從插入組件的菜單上，只能表現(xiàn)出庫文檔內(nèi)的所有內(nèi)部組件，文檔內(nèi)的外部組件是不會出如今菜單上的，所以通常情況下作為庫的文檔都是組件母版。使用了嵌入另一庫組件的庫組件，假如沒載入內(nèi)嵌庫組件所屬的庫，在 Overrides 中把組件替換成其他組件，就只能重新插入來恢復(fù)之前的狀況。在 Sketch 49 之后，未被使用的外部組件在文檔保存時會被主動刪除，為了保留外部組件可以插入到畫布內(nèi)。

4. 庫組件如何從關(guān)聯(lián)的庫更新

在介紹庫更新機(jī)制前，必要簡單了解下 Sketch 內(nèi)部是如何識別對象的。在 Sketch 中創(chuàng)建的任何對象，新建一個文件、插入一個圖層、創(chuàng)建一個樣式等等，Sketch 都會給這些對象添加唯一標(biāo)識 UUID。圖層上的 UUID 這里稱為圖層 ID，組件上的 UUID 稱為 組件 ID（SymbolID），組件母版和組件實(shí)例都即有圖層 ID 也有 組件 ID。ID 信息在界面上沒有表現(xiàn)，設(shè)計使也不會用到這些信息，它們是作為 Sketch 文檔結(jié)構(gòu)上使用的。

庫組件并非真實(shí)的鏈接，你將包含外部組件的文檔發(fā)給其他人，并不會出現(xiàn)壞鏈導(dǎo)致文檔錯誤，現(xiàn)實(shí)上這些數(shù)據(jù)都保存在當(dāng)前的文檔中，所以使用外部組件不會使文檔體積減小，它的上風(fēng)在于更新機(jī)制。庫組件也沒有保存庫的路徑，它記錄了庫名、庫 ID 和組件原始 ID（Remote SymbolID， 組件在它的庫中的 SymbolID），庫的名稱表現(xiàn)在屬性面板和外部組件管理面板上，庫 ID 沒有在界面上表現(xiàn)出來。

庫組件主動更新，其實(shí)就是 「庫列表」 – 「庫 ID」 – 「外部組件原始 ID」 這三者的關(guān)聯(lián)。通過庫組件的庫 ID，從庫面板的列表中，按照添加的時間從新到舊依次檢索所有未被禁用的、鏈接齊備的庫，直到匹配到庫 ID ，然后查找該庫文件內(nèi)是否有與庫組件 SymbolID 匹配的組件，假如包含并且內(nèi)容有差異就提示更新，更新的過程現(xiàn)實(shí)上就是內(nèi)容替代。假如這個庫文件沒有與之匹配的組件，還會接著從另一個雷同庫 ID 的庫文件內(nèi)檢索。假如某個環(huán)節(jié)沒有效果，這個組件就不會有提醒更新。比較棘手的題目是目前界面并沒有地方可以處理這些關(guān)系，當(dāng)這種隱蔽的關(guān)系鏈出現(xiàn)題目，就必要借助特別的插件，或通過在 「Plugins」 – 「Run Script…」 運(yùn)行特定的腳原本查看信息或處理關(guān)聯(lián)。

二、開始使用庫

1. 建立庫

任何 Sketch 文件都可以當(dāng)作庫，對于自力的設(shè)計師的庫管理者，可以比較隨意的創(chuàng)建庫，出現(xiàn)情況的可能性并不大。重要在于團(tuán)隊(duì)協(xié)作中，庫管理者就必要了解上文的庫類型和庫組件更新原理，并且清晰這些庫和組件的聯(lián)系，根據(jù)自身團(tuán)隊(duì)的詳細(xì)情況選擇哪一種類型的庫，用多個庫文件照舊一個庫文件，每個庫文件里有哪些內(nèi)部組件。

在 Sketch 中創(chuàng)建組件是不可能出現(xiàn)重復(fù)的組件 ID 的，大部分題目出在庫 ID 的管理上。從 Sketch 創(chuàng)建一個文檔，就賦予文檔一個 ID，這個在這個文檔被用作庫時就是庫 ID，假如在 Finder 或其他非體例復(fù)制文件，就會導(dǎo)致庫 ID 是雷同的，假如直接在這個庫里的組件母版修改內(nèi)容，會出現(xiàn)雷同 ID 的庫里面也包含雷同 ID 的組件，當(dāng)這兩個文件同時被加到庫列表中，就會可能出現(xiàn)庫組件關(guān)聯(lián)錯誤或無法更新。所以確保庫 ID 不重復(fù)的方法就是盡量新建文檔。

2. 將內(nèi)部組件轉(zhuǎn)為庫組件

載入所有相干的庫之后就可以把之前的文件轉(zhuǎn)換為新的外部組件情勢的文檔，如今已經(jīng)有成熟的插件可以處理這個艱巨的工作。

假如你之前用的是模版文件體例來設(shè)計，而且?guī)煲彩窃瓉淼哪０嫖募敲催@種情況下庫內(nèi)的組件 ID 和設(shè)計文檔的組件 ID 是可以匹配的，可以使用基于 ID 的體例來替代。Automate 插件內(nèi)的 「Symbol – Change Symbols to Library Symbol Base Symbol ID」 功能，在選擇內(nèi)部組件實(shí)例或組件母版之后，可以批量替代成制訂庫的雷同組件 ID 的庫組件。

假如必要用到基于組件名稱的批量替代可以使用以下插件。

• Library Symbol Replacer
• Symbol Swapper
• Move to library

即非同 ID 也非同名的情況，就沒法批量處理了，可以使用 Automate 插件內(nèi)的 「Symbol – Replace Symbol with Library Symbol」 功能逐個替代，在替代的列表中，會把雷同尺寸或 ID 的組件前置。

假如庫組件已經(jīng)做了較大改變，根據(jù) ID 或名稱已經(jīng)無法達(dá)到理想結(jié)果，可以在組件右鍵菜單中選擇合適的庫組件替代，最后再使用 Automate 插件內(nèi)的 「Symbol – Remove Unused Symbols」 刪除多余的組件。

3. 從庫同步圖層和文本樣式

就目前的 Sketch 界面中只表現(xiàn)出庫文檔的內(nèi)部組件，有些保存在庫文檔的資源，例如圖層樣式、文本樣式，甚至色彩、漸變和圖片添補(bǔ)，必要寄托插件同步至新文檔。

Automate 插件包含從任意 Sketch 文件或庫倒入文檔資源和樣式的功能。色彩、漸變和圖片添補(bǔ)等文檔資源是根據(jù)內(nèi)容添加的不會導(dǎo)致列表重復(fù)，而樣式則更加對象的 ID，同 ID 項(xiàng)的樣式屬性會被更新。

Automate 插件樣式相干的功能如下：

• Style – Import Document Assets from Sketch File，從 Sketch 文件導(dǎo)入色彩、漸變及圖片添補(bǔ)等資源。
• Style – Import Text Styles from Sketch File，從 Sketch 文件導(dǎo)入文本樣式。
• Style – Import Layer Styles from Sketch File，從 Sketch 文件導(dǎo)入圖層樣式。
• Library – Import Document Assets from Library，從庫導(dǎo)入色彩、漸變及圖片添補(bǔ)等資源。
• Library – Import Styles from Library，從庫導(dǎo)入文本和圖層樣式。

4. 庫的托管方案

團(tuán)隊(duì)協(xié)作中，庫管理者必要把庫文件分發(fā)給其他設(shè)計師，設(shè)計師必要把庫文件都加入庫面板，偶然還必要設(shè)計師配置一些基礎(chǔ)設(shè)施，比如安裝某些 Sketch 插件、字體或者某些第三方工具。之后庫管理者必要有一個機(jī)制來關(guān)照設(shè)計師更新庫文件或主動同步。

以下列出一些從低級到高級的方案，可以根據(jù)自身團(tuán)隊(duì)的情況選擇合適的方案。對庫由專人管理的團(tuán)隊(duì)，為了防止設(shè)計師偶然中修改庫文件，盡量要求所有設(shè)計師關(guān)閉 Sketch 的主動保存功能。假如庫必要接受多人協(xié)作，則要選擇版本控制體系方案。

5. 人工同步

人工同步是指行使郵件或某些傳輸體例，把庫文件打包發(fā)給所有設(shè)計師的方法，這是一種特別很是低端的不保舉的方案。實(shí)際中許多國內(nèi)設(shè)計團(tuán)隊(duì)，可能都會采用這種方案，庫的管理者有個題目必要細(xì)致下，每次發(fā)文件時給文件加個版本號，最后記得抄送向?qū)А?/p>

上文中已經(jīng)了解到組件更新機(jī)制，所以設(shè)計師收到帶不同版本號的庫文件，可以不把這些文件改成當(dāng)前使用的名字，只必要直接加入庫即可，舊版的文件可以從列表上刪除或者禁用，保留在列表中也不會影響組件的更新。

6. 使用鏈接服務(wù)器和共享電腦同步

macOS 可以連接到一些特別服務(wù)器和共享電腦，例如 Windows / macOS 共享文件夾、NAS 共享磁盤、FTP 和 WebDAV 等等，細(xì)致支持功能可以查看 Apple 官方支持文檔。搭建這種服務(wù)的方法也比較簡單，可以根據(jù)現(xiàn)實(shí)情況選擇。

使用這種方案來同步，沒有把庫文件分發(fā)給所有設(shè)計，現(xiàn)實(shí)上所有的設(shè)計師是從統(tǒng)一個共享磁盤目錄載入庫文件的。這種方案庫文件名稱必須是固定的，可以通過手動或主動備份的方法記錄版本。共享磁盤和 FTP 可以設(shè)置權(quán)限，如許可以避免設(shè)計師修改庫文件，其他類型服務(wù)可能要考慮其他用戶寫入權(quán)限題目。

設(shè)計師和庫管理者通過 Finder 的菜單 「前往」 – 「鏈接服務(wù)器…」，掛載磁盤或鏈接服務(wù)器，不同類型服務(wù)的地址，請參考 Apple 官方支持文檔。

要解決每次開機(jī)手動鏈接服務(wù)器的題目，可以設(shè)置開機(jī)主動鏈接。這個設(shè)置必要在鏈接服務(wù)器時，勾選 「在我的鑰匙串記住此密碼」。

然后在 「體系便好設(shè)置」 – 「用戶與群組」 ，選擇當(dāng)前用戶的 「登錄項(xiàng)」，并將響應(yīng)的網(wǎng)絡(luò)硬盤加入列表中并保持選中。

庫管理者將庫文件放到網(wǎng)絡(luò)文件夾中，設(shè)計師會立即收到更新，此方案必要細(xì)致，權(quán)限題目、版本管理和備份等。

7. 使用云盤同步

使用類似 iCloud Drive，Google Drive，Dropbox 等云盤同步，這個方案必要考慮改服務(wù)的網(wǎng)絡(luò)題目，是否可以文件共享，是否有客戶端或體系集成的文件同步，是否有權(quán)限控制等等，最緊張的是文件必要同步到本地。假如處于保密考慮，則可能必要在內(nèi)網(wǎng)本身搭建例如 ownCloud / NextCloud 之類的云盤程序。某些云盤服務(wù)提供 WebDAV 功能，則可以使用上一種方案。

此方案也必要細(xì)致權(quán)限題目、版本管理和備份等題目。

8. 使用 Sketch Cloud 同步

在 Sketch 49 以后將 Sketch Cloud 上的文件作為庫添加，庫管理者將文件上傳至 Sketch Cloud，然后通過開放文檔或著使用郵件分享給其他設(shè)計師，設(shè)計師將文件添加到庫之后，庫管理者每次更新文件之后，Sketch 會主動后臺下載，其他設(shè)計師就會收到更新提示。

設(shè)計師沒法修改庫內(nèi)容，來自云端的庫文件一時存儲在 「~/Library/Application Support/com.bohemiancoding.sketch3/Libraries」 目錄下，一時打開可以在庫面板列表右側(cè)的 QuickLook 圖標(biāo)打開預(yù)覽窗口，再從預(yù)覽窗口右上角的 「Open With Sketch」 按鈕打開。這個文件的修改會被網(wǎng)絡(luò)的版本主動覆蓋。

此方案依靠網(wǎng)絡(luò)，并且會涉及項(xiàng)目的保密性，適合開放的項(xiàng)目，也必要細(xì)致版本管理和備份等題目。

Sketch 官方提供了兩個示例文檔。

• Elements UI Kit 添加到庫
• macOS UI Library 添加到庫

9. 使用 Abstract

Abstract 目前僅支持 Sketch 文件的版本控制，他包裝了一些 Git 版本控制體系的概念和流程，提供了一套設(shè)計師友愛的文件更新記錄、分支、合并等功能，采用這個方案必要所有團(tuán)隊(duì)成員都依靠于 Abstract 平臺，并且有一套特別的工作體例，必要付費(fèi)才能開通團(tuán)隊(duì)協(xié)作功能。類似的服務(wù)還有 Kactus 和 Plant，通常都是必要付費(fèi)的，這種方案適合必要多人共同管理庫文件的情況。

10. 使用版本控制體系同步

使用版本控制體系同步庫文件，必要搭建一個版本控制體系服務(wù)器，這個有些公司的可能已經(jīng)搭建好了，有些則付費(fèi)使用一些在線服務(wù)。另外要求團(tuán)隊(duì)中的設(shè)計師要比較了解版本控制體系客戶端的操作。雖然技術(shù)要求較高，但是可以很好的解決權(quán)限控制、保密性、版本管理等題目。

在小型團(tuán)隊(duì)或者開放的團(tuán)隊(duì)中，一些免費(fèi)的 Git 服務(wù)也可以考慮，例如 GitHub、GitLab 或 BitBucket。這些對開放項(xiàng)目沒有空間和團(tuán)隊(duì)限定，GitLab 和 BitBucket 的免費(fèi)用戶可以使用 5 人的團(tuán)隊(duì)，設(shè)計師使用例如 Cornerstone（SVN）、Versions（SVN）、Sourcetree（Git）、Tower（Git）等客戶端來接收更新提示，庫管理者也使用客戶端上傳文件，并在 Web 端控制權(quán)限。Web 端管理程序，還附帶一些文檔管理、分支管理和題目跟蹤等功能，有些甚至可以處理一些主動化義務(wù)。

行使 GitHub 或 GitLab 等常見的版本控制平臺，通過腳天職解 Sketch 文件，按照特定的 Git Flow 工作，手工編輯 JSON 的體例也可以合并文件或解決沖突，只是對庫管理者技術(shù)要求較高。

11. 自托管同步

官方工作人員稱此功能尚未完美和對外開放。目前從 Apple UI Design Resources 下載的 Sketch 文件就是鏈接至 Apple 官方自托管的庫，必要從庫面板下載內(nèi)置的 Apple iOS UI。庫更新由 Apple 官方維護(hù)，使用者可以主動接收到更新。

12. 使用 Sketch 插件同步

Sketch 插件有后臺下載和提醒更新功能，假如將所有的庫文件一路打包到自家開發(fā)的 Sketch 插件內(nèi)，也可以做到通過插件的更新機(jī)制來同步庫文件，或通過插件下載庫文件，并通過插件主動將文件載入到庫面板中，保證團(tuán)隊(duì)中所有設(shè)計師使用的文件版本都是同等的。

這種方案瑕玷是對技術(shù)要求較高，除了主動更新和加載庫保證設(shè)計師文件同等，當(dāng)團(tuán)隊(duì)中有較多成員和庫文件，這種方案的好處就會更加顯明。其他方案將文件分發(fā)給其他設(shè)計師的過程會出現(xiàn)一些題目，例如某些設(shè)計師并沒有在 Sketch 中載入精確的庫文件，或者沒有及時更新，另外有些設(shè)計沒有安裝精確的字體等等題目，都可以在插件中解決。另外插件還可以集成一些針對團(tuán)隊(duì)營業(yè)特別需求或是腳手架的功能，用來進(jìn)步團(tuán)體的工作服從。

13. 選擇適合團(tuán)隊(duì)的方案

下表列出各種方案的工作體例的簡單對比，管理者的操作從簡單依次至復(fù)雜，從低級至高級。

在團(tuán)隊(duì)中采用哪種方案來托管和同步 Sketch 庫，很大程度上取決于團(tuán)隊(duì)成員的技術(shù)水平和文化環(huán)境。比如團(tuán)隊(duì)里的設(shè)計師很難接受新事物，或者設(shè)計部門沒有經(jīng)費(fèi)預(yù)算，公司不許可將工作內(nèi)容上傳到網(wǎng)絡(luò)上，團(tuán)隊(duì)里的設(shè)計師都不會 Git 等等，盡管如此建議照舊盡量采用較高級的方案。也可以同時采用多個方案，讓設(shè)計師根據(jù)自身情況選擇。

原文鏈接：《深入理解 Sketch 庫（上）》