久久成人综合视频,国产日产精品一区,亚洲视频综合在线

在 Sketch 47 中引人的庫（Library）功能，這次更新改變了設計團隊工作方式和流程。庫在設計團隊維護一個設計系統或風格指南上，起到非常重要的作用，可以給團隊帶來更加高效工作體驗。

越來越多的設計師和團隊使用 Sketch 作為主要的設計工具，得益于眾多插件和第三方應用，即使在沒有技術支持的情況下也能解決一些常見問題。然而每次引入大功能時，也會帶來很多坑。事實上有些 UI 設計團隊的領導，是不太注重方法和流程的，這種團隊選擇 Sketch 大多是為了更快速出圖，在這樣的團隊中設計師就要艱辛地踩各種坑。

作為一個寫 Sketch 插件的設計師，非常能理解這些問題給團隊效率帶來的影響。在 Sketch 47 剛發布時，我便開始在我的 Automate 插件中增加一些庫相關的功能，久而久之便對庫有了比較深入的了解。這篇文章主要介紹高級的信息，可以幫助設計團隊更好的使用 Sketch 庫，并解決一些復雜問題。如果需要基礎教程，請查閱官方文檔或其他網上的一些文章。

這一系列的文章分為上中下三部分，上部主要介紹基礎概念和庫的托管方案；中部主要針對庫管理者，內容包括組件命名、庫維護等；下部則是針對團隊中相對高級的庫管理者，使用腳本解決一些復雜問題。

一、基礎概念

1. 模版與庫

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

有時模版特指被加入到菜單「New From Template」下或顯示在 Welcome 界面上的那些文件。可以使用「Save as Template…」菜單或者直接將文件復制到「~/Library/Application Support/com.bohemiancoding.sketch3/Templates」文件夾內。

高手進階技巧！全方位深入理解 Sketch 庫（上）

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

高手進階技巧！全方位深入理解 Sketch 庫（上）

在沒有引入庫功能時，設計團隊使用模板文件來協作，但 Sketch 并未提供一種文檔內容更新機制，只能依賴一些插件將文檔通過組件名稱匹配來替換成另一個文件的組件，但這對組件圖層命名要求嚴格，也沒有可視化對比。庫功能解決了這種公共內容更新或替換的需求，這一點在團隊協作中非常重要。

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

2. 庫的類型

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

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

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

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

這三種庫在使用上并沒有非常大的差別，只是添加方式不同。來自內置庫和遠程庫的組件，使用者無法在庫中修改，雙擊這種組件時只有一個選項「Unlink from Library」。

高手進階技巧！全方位深入理解 Sketch 庫（上）

而來自用戶庫的組件，則有兩個選項「Unlink from Library」和「Open in Original Document」。可以這么理解遠程庫適合集中管理的庫，用戶無法修改而統一由管理者修改，而用戶庫則適合需要協作修改的庫，實際上用戶可以操作的只有用戶庫和遠程庫兩種，下文會詳細說明這兩種類型的庫如何同步。

高手進階技巧！全方位深入理解 Sketch 庫（上）

3. 組件實例、組件母版與庫組件

組件母版（Symbol Master）是一種特殊畫板，能夠引出另一個分身稱為組件實例（Symbol Instance），分身只有單一的圖層，但可能會有不同外觀。組件實例在圖層面板有兩種圖標，旋轉箭頭圖標表示文檔內的實例，而索鏈圖標則表示來自庫的實例，這種來自庫的實例無法在當前文檔修改母版，很多情況就稱為庫組件（Library Symbol）。

高手進階技巧！全方位深入理解 Sketch 庫（上）

為了區別文檔上的組件母版和庫組件，文檔上所有的組件母版集合稱為內部組件（Local Symbols），文檔上所有庫組件的集合通常叫外部組件（Foreign Symbols）或導入的組件（Imported Symbols）。

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

4. 庫組件如何從關聯的庫更新

在介紹庫更新機制前，需要簡單了解下 Sketch 內部是如何識別對象的。在 Sketch 中創建的任何對象，新建一個文件、插入一個圖層、創建一個樣式等等，Sketch 都會給這些對象添加唯一標識 UUID。圖層上的 UUID 這里稱為圖層 ID，組件上的 UUID 稱為組件 ID（SymbolID），組件母版和組件實例都即有圖層 ID 也有組件 ID。ID 信息在界面上沒有體現，設計使也不會用到這些信息，它們是作為 Sketch 文檔結構上使用的。

庫組件并非真實的鏈接，你將包含外部組件的文檔發給其他人，并不會出現壞鏈導致文檔錯誤，實際上這些數據都保存在當前的文檔中，所以使用外部組件不會使文檔體積減小，它的優勢在于更新機制。庫組件也沒有保存庫的路徑，它記錄了庫名、庫 ID 和組件原始 ID（Remote SymbolID，組件在它的庫中的 SymbolID），庫的名稱顯示在屬性面板和外部組件管理面板上，庫 ID 沒有在界面上體現出來。

庫組件自動更新，其實就是「庫列表」 - 「庫 ID」 - 「外部組件原始 ID」這三者的關聯。通過庫組件的庫 ID，從庫面板的列表中，按照添加的時間從新到舊依次檢索所有未被禁用的、鏈接完好的庫，直到匹配到庫 ID ，然后查找該庫文件內是否有與庫組件 SymbolID 匹配的組件，如果包含并且內容有差異就提醒更新，更新的過程實際上就是內容替換。如果這個庫文件沒有與之匹配的組件，還會接著從另一個相同庫 ID 的庫文件內檢索。如果某個環節沒有結果，這個組件就不會有提示更新。比較棘手的問題是目前界面并沒有地方可以處理這些關系，當這種隱藏的關系鏈出現問題，就需要借助特殊的插件，或通過在「Plugins」 - 「Run Script…」運行特定的腳本來查看信息或處理關聯。

二、開始使用庫

1. 建立庫

任何 Sketch 文件都可以當作庫，對于獨立的設計師的庫管理者，可以比較隨意的創建庫，出現情況的可能性并不大。主要在于團隊協作中，庫管理者就需要了解上文的庫類型和庫組件更新原理，并且清晰這些庫和組件的聯系，根據自身團隊的具體情況選擇哪一種類型的庫，用多個庫文件還是一個庫文件，每個庫文件里有哪些內部組件。

在 Sketch 中創建組件是不可能出現重復的組件 ID 的，大部分問題出在庫 ID 的管理上。從 Sketch 創建一個文檔，就賦予文檔一個 ID，這個在這個文檔被用作庫時就是庫 ID，如果在 Finder 或其他非方式復制文件，就會導致庫 ID 是相同的，如果直接在這個庫里的組件母版修改內容，會出現相同 ID 的庫里面也包含相同 ID 的組件，當這兩個文件同時被加到庫列表中，就會可能出現庫組件關聯錯誤或無法更新。所以確保庫 ID 不重復的方法就是盡量新建文檔。

2. 將內部組件轉為庫組件

載入所有相關的庫之后就可以把之前的文件轉換為新的外部組件形式的文檔，現在已經有成熟的插件可以處理這個艱巨的工作。

如果你之前用的是模版文件方式來設計，而且庫也是原來的模版文件，那么這種情況下庫內的組件 ID 和設計文檔的組件 ID 是可以匹配的，可以使用基于 ID 的方式來替換。Automate 插件內的「Symbol - Change Symbols to Library Symbol Base Symbol ID」功能，在選擇內部組件實例或組件母版之后，可以批量替換成制定庫的相同組件 ID 的庫組件。

如果需要用到基于組件名稱的批量替換可以使用以下插件。

Library Symbol Replacer
Symbol Swapper
Move to library

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

高手進階技巧！全方位深入理解 Sketch 庫（上）

如果庫組件已經做了較大改變，根據 ID 或名稱已經無法達到理想效果，可以在組件右鍵菜單中選擇合適的庫組件替換，最后再使用 Automate 插件內的「Symbol - Remove Unused Symbols」刪除多余的組件。

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

就目前的 Sketch 界面中只顯示出庫文檔的內部組件，有些保存在庫文檔的資源，例如圖層樣式、文本樣式，甚至色彩、漸變和圖片填充，需要依靠插件同步至新文檔。

Automate 插件包含從任意 Sketch 文件或庫倒入文檔資源和樣式的功能。色彩、漸變和圖片填充等文檔資源是根據內容添加的不會導致列表重復，而樣式則更加對象的 ID，同 ID 項的樣式屬性會被更新。

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

Style - Import Document Assets from Sketch File，從 Sketch 文件導入色彩、漸變及圖片填充等資源。
Style - Import Text Styles from Sketch File，從 Sketch 文件導入文本樣式。
Style - Import Layer Styles from Sketch File，從 Sketch 文件導入圖層樣式。
Library - Import Document Assets from Library，從庫導入色彩、漸變及圖片填充等資源。
Library - Import Styles from Library，從庫導入文本和圖層樣式。

4. 庫的托管方案

團隊協作中，庫管理者需要把庫文件分發給其他設計師，設計師需要把庫文件都加入庫面板，有時還需要設計師配置一些基礎設施，比如安裝某些 Sketch 插件、字體或者某些第三方工具。之后庫管理者需要有一個機制來通知設計師更新庫文件或自動同步。

以下列出一些從低級到高級的方案，可以根據自身團隊的情況選擇合適的方案。對庫由專人管理的團隊，為了防止設計師無意中修改庫文件，盡量要求所有設計師關閉 Sketch 的自動保存功能。如果庫需要接受多人協作，則要選擇版本控制系統方案。

5. 人工同步

人工同步是指利用郵件或某些傳輸方式，把庫文件打包發給所有設計師的方法，這是一種非常低端的不推薦的方案。現實中很多國內設計團隊，可能都會采用這種方案，庫的管理者有個問題需要注意下，每次發文件時給文件加個版本號，最后記得抄送領導。

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

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

macOS 可以連接到一些特殊服務器和共享電腦，例如 Windows / macOS 共享文件夾、NAS 共享磁盤、FTP 和 WebDAV 等等，詳細支持功能可以查看 Apple 官方支持文檔。搭建這種服務的方法也比較簡單，可以根據實際情況選擇。

使用這種方案來同步，沒有把庫文件分發給所有設計，實際上所有的設計師是從同一個共享磁盤目錄載入庫文件的。這種方案庫文件名稱必須是固定的，可以通過手動或自動備份的方法記錄版本。共享磁盤和 FTP 可以設置權限，這樣可以避免設計師修改庫文件，其他類型服務可能要考慮其他用戶寫入權限問題。

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

高手進階技巧！全方位深入理解 Sketch 庫（上）

要解決每次開機手動鏈接服務器的問題，可以設置開機自動鏈接。這個設置需要在鏈接服務器時，勾選「在我的鑰匙串記住此密碼」。

高手進階技巧！全方位深入理解 Sketch 庫（上）

然后在「系統便好設置」 - 「用戶與群組」，選擇當前用戶的「登錄項」，并將相應的網絡硬盤加入列表中并保持選中。

高手進階技巧！全方位深入理解 Sketch 庫（上）

庫管理者將庫文件放到網絡文件夾中，設計師會立即收到更新，此方案需要注意，權限問題、版本管理和備份等。

7. 使用云盤同步

使用類似 iCloud Drive，Google Drive，Dropbox 等云盤同步，這個方案需要考慮改服務的網絡問題，是否可以文件共享，是否有客戶端或系統集成的文件同步，是否有權限控制等等，最重要的是文件需要同步到本地。如果處于保密考慮，則可能需要在內網自己搭建例如 ownCloud / NextCloud 之類的云盤程序。某些云盤服務提供 WebDAV 功能，則可以使用上一種方案。

此方案也需要注意權限問題、版本管理和備份等問題。

8. 使用 Sketch Cloud 同步

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

設計師沒法修改庫內容，來自云端的庫文件臨時存儲在「~/Library/Application Support/com.bohemiancoding.sketch3/Libraries」目錄下，臨時打開可以在庫面板列表右側的 QuickLook 圖標打開預覽窗口，再從預覽窗口右上角的「Open With Sketch」按鈕打開。這個文件的修改會被網絡的版本自動覆蓋。

此方案依賴網絡，并且會涉及項目的保密性，適合開放的項目，也需要注意版本管理和備份等問題。

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

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

9. 使用 Abstract

Abstract 目前僅支持 Sketch 文件的版本控制，他包裝了一些 Git 版本控制系統的概念和流程，提供了一套設計師友好的文件更新記錄、分支、合并等功能，采用這個方案需要所有團隊成員都依賴于 Abstract 平臺，并且有一套特殊的工作方式，需要付費才能開通團隊協作功能。類似的服務還有 Kactus 和 Plant，通常都是需要付費的，這種方案適合需要多人共同管理庫文件的情況。

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

使用版本控制系統同步庫文件，需要搭建一個版本控制系統服務器，這個有些公司的可能已經搭建好了，有些則付費使用一些在線服務。另外要求團隊中的設計師要比較了解版本控制系統客戶端的操作。雖然技術要求較高，但是可以很好的解決權限控制、保密性、版本管理等問題。

在小型團隊或者開放的團隊中，一些免費的 Git 服務也可以考慮，例如 GitHub、GitLab 或 BitBucket。這些對開放項目沒有空間和團隊限制，GitLab 和 BitBucket 的免費用戶可以使用 5 人的團隊，設計師使用例如 Cornerstone（SVN）、Versions（SVN）、Sourcetree（Git）、Tower（Git）等客戶端來接收更新提醒，庫管理者也使用客戶端上傳文件，并在 Web 端控制權限。Web 端管理程序，還附帶一些文檔管理、分支管理和問題跟蹤等功能，有些甚至可以處理一些自動化任務。

利用 GitHub 或 GitLab 等常見的版本控制平臺，通過腳本分解 Sketch 文件，按照特定的 Git Flow 工作，手工編輯 JSON 的方式也可以合并文件或解決沖突，只是對庫管理者技術要求較高。

11. 自托管同步

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

12. 使用 Sketch 插件同步

Sketch 插件有后臺下載和提示更新功能，如果將所有的庫文件一起打包到自家開發的 Sketch 插件內，也可以做到通過插件的更新機制來同步庫文件，或通過插件下載庫文件，并通過插件自動將文件載入到庫面板中，保證團隊中所有設計師使用的文件版本都是一致的。

這種方案缺點是對技術要求較高，除了自動更新和加載庫保證設計師文件一致，當團隊中有較多成員和庫文件，這種方案的優點就會更加明顯。其他方案將文件分發給其他設計師的過程會出現一些問題，例如某些設計師并沒有在 Sketch 中載入正確的庫文件，或者沒有及時更新，另外有些設計沒有安裝正確的字體等等問題，都可以在插件中解決。另外插件還可以集成一些針對團隊業務特殊需求或是腳手架的功能，用來提高整體的工作效率。

13. 選擇適合團隊的方案

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

高手進階技巧！全方位深入理解 Sketch 庫（上）
在團隊中采用哪種方案來托管和同步 Sketch 庫，很大程度上取決于團隊成員的技術水平和文化環境。比如團隊里的設計師很難接受新事物，或者設計部門沒有經費預算，公司不允許將工作內容上傳到網絡上，團隊里的設計師都不會 Git 等等，盡管如此建議還是盡量采用較高級的方案。也可以同時采用多個方案，讓設計師根據自身情況選擇。