本期是一篇很長的譯文，Using Sketch Libraries to build better design systems，從理論方法到實踐演示，一應俱全。

看完本文你會學到：

1. 如何解決Symbols同步共用問題？
2. 使用Sketch Libraries創建組件庫
3. ?對核心Libraries中的元素進行更新

另外說，Sketch 48 Beta已經開始提供Colors Management方面的功能，又是一次體系化角度的重要更新。

注意：Libraries功能僅在最新的Sketch 47當中提供。

所謂設計，就是在一系列約束條件下構建解決方案的過程?！狝dam Morse

從某種程度上講，設計體系便是這樣的一種約束。諸如配色、圖標、按鈕等一系列設計語言要素共同構成了標準化的體系，為設計決策提供著指引。

遵從于這樣的標準化體系，設計流程能夠得到有效加速；同時，設計模式的復用性與一致性也將得到提升，產品設計方案整體更具擴展性，更易于維護。

然而在現實當中，創建和維護標準化設計體系的方式卻多種多樣。Sketch是我們在設計工作當中的利器，可以幫助我們簡化設計體系的創建流程，但其自身在各方面存在的問題也是無法忽視的。

問題所在

在Sketch 47為我們帶來Libraries之前，Symbols一直是Sketch當中最為重要的功能之一，同時也是構建設計體系的關鍵能力。Symbols用于創建可復用的界面元素，有助于維護設計方案的一致性。然而一直以來，這一機制的作用范圍僅限于文檔內部，除非借助第三方插件的幫助，否則Symbols無法在不同的文件之間保持同步。

這為什么是問題？

對于小項目來說，這沒什么大不了。你可以將全部設計方案，甚至包括高保真原型、流程圖一類都塞到一個文件當中，Sketch處理起來也不會產生什么問題。

然而，情況會隨著項目規模的擴大而有所不同。出于性能效率或協作方面的考慮，我們通常需要將項目打散到不同的Sketch文件當中；這時，Symbols同步共用方面的問題就會暴露出來。

我們的團隊有三個產品用到了同一套Symbols，這里的挑戰就在于如何確保Symbols在不同項目之間的同步性。這三個產品都是很大的項目，各自的源文件都包含上百個畫板（Artboard），因此難以通過單一Sketch文件來承載，否則文件將變得非常龐大。

一個Sketch文件承載了整個組件庫

從前的處理方式

我們曾經使用一套Sketch模板來集中放置所有的Symbols，這種方式參考了原型制作工具Marvel官方的設計規范創建方法。在此基礎上，我們進行了一定程度的擴展，例如在不同的Sketch文件當中通過Craft插件統一調用Symbols模板文件。

使用Craft插件構建組件庫

事實上，我個人并不推薦這種方式。文件尺寸的確得到了控制，Symbols的來源也得到了統一。但問題在于，一旦模板當中的Symbols發生變化，對于那些已經插入到不同文檔當中的Symbols，我們無法進行同步性的更新。

Symbols功能的本質目標是使項目更易于創造和維護。然而，強大的復用能力只是其中的一個方面；對于那些已經被插入到不同文檔當中的Symbols，你根本無法進行統一管理與更新。

幸運的是，Sketch 47為我們帶來了Libraries功能。

解決方案

Libraries功能可以幫助我們創建獨立的、能夠被多個文件統一調用的Symbols庫。這種機制已經有些類似于前端開發者們所熟悉的Sass了。不僅如此，你還可以對Libraries進行嵌套。

大體上講，如今你可以將不同類型的Symbols分別存放在不同的Sketch文件當中各自作為獨立的Library，譬如配色定義、圖標、按鈕、表單元素等等；其他項目文件則可以統一調用這些源文件當中的Symbols。當你修改了Libraries源文件，相關的變化也會同步更新到所有的項目文件當中。

這種統一管理和調用的機制可以為工作帶來諸多益處，包括：

• 減小文件尺寸
• 增強Sketch的性能表現
• 提升界面元素的統一性
• 提升項目整體的可維護性

Sketch官方團隊是這樣詮釋Libraries功能的：

一個Library本質上就是一個普通的Sketch文件，其中的Symbols可以被其他Sketch文件調用。如果你編輯了Library當中的Symbols，那么調用了該Library的其他Sketch文件便會收到更新通知，你可以對變更進行預覽、對比和確認，使這些Sketch文件所調用的Symbols自動更新至最新版本。

使用Sketch Libraries創建組件庫

在本文接下來的部分當中，我將展示如何使用Sketch Libraries功能創建UI組件庫。不過在此之前，我們還需要明確一些思路與原則。

像開發人員一樣思考

打造設計體系的過程中，設計師們要試著像開發人員一樣思考?！?strong>D.R.Y – Don’t repeat yourself

組件庫的基本概念就是逐層創建可復用的UI元素，保持文件的輕量化以及設計方案的一致性。

從“原始元素”入手

我們所創建的任何一個組件都是由若干“屬性”組成的。這些屬性就是設計體系當中最為「原始化」的元素。開發人員會在代碼當中為這些屬性創造各自的變量，以提升代碼的復用性；對于設計師來說也是同理，我們可以為各種原始化UI元素創建Libraries，以便逐層構筑更高級別的組件。

原子化設計理論

為了確保組件庫的擴展性，我將Brad Frost提出的原子化設計理論作為指導。這套理論簡單易行，很容易理解。

簡而言之，原子化設計的靈感來自于現實世界當中的分子結構。UI當中顆粒度最小的元素，即「原子」，組成了顆粒度較大的控件，即「分子」；而諸多分子又組成了更加復雜的組件與模塊，即「有機體」。

將不同類型的Symbols放在各自的Library文件中

當然，如果你愿意，你仍然可以將所有組件都放置在同一個Library文件當中；而我的建議則是為每種類型的Symbols各自創建一個獨立的Library文檔。

類似于開發人員使用Sass partials的方式，調用多個Libraries文檔可以使我們的設計體系更為優雅，更易維護。經過合理拆分的Libraries文檔將更有利于被不同的項目調用；在需要的時候，也可以更加方便地進行擴展。

參照「原始元素」的思路，我們將從最為基礎和核心的UI元素入手，包括顏色、圖標等等，這些元素將在整個設計體系范圍內被使用到；所有「原子、分子、有機體」級別的UI元素也正是由這些原始元素所構成的。

我們首先要對全局所用到的各類顏色進行定義。

第一步：創建新的Sketch文檔，用于顏色定義

對于團隊項目，我會在Sketch文件名當中統一添加「AIN」作為前綴，例如「AIN-Colors」等等，以便與其他項目進行區分。當然，命名方式和習慣因人而異，如果你和我一樣需要處理很多不同的項目，通過前綴進行區分的方式或許值得考慮。

我會為設計體系當中的每一種顏色生成一個Shared Style，并按照不同的作用進行分類，包括「brand、greyscale、UI」等等；具體的分類方式就是在Shared Style命名當中通過「/」符號表示層級結構，Sketch會識別到該符號，并自動生成相應的架構。

接下來，我會為每一種顏色制作一個Symbol，并使用Symbol Organizer插件在Symbols頁面當中對它們進行組織 – 在層級化命名方式的輔助下，Symbols頁面將自動呈現出清晰的架構體系。

第二步：將顏色定義文檔添加到Libraries體系

完成了顏色定義之后，我們需要將這份Sketch文檔添加到Libraries體系當中。設計體系當中所有原子級元素的定義都需要這一步驟。

在頂部菜單欄選擇「Sketch ? Preferences」，然后進入「Libraries」選項卡，點擊“Add Library」按鈕，選擇我們在上一步里創建的Sketch文檔。

如圖所示，我將AIN-colors文檔添加到了Libraries體系當中，這樣我就可以在任何其他Sketch文件里對其進行調用了；這便是Libraries功能的強大之處。

怎樣使用這些顏色Symbols呢？在接下來創建圖標Library的過程中，我將進行演示。

第三步：創建新的Sketch文檔，用于圖標定義

類似于我們在第一步當中的做法，這一次我們對圖標進行定義。新文檔名為「AIN-icons」，與之前的「AIN-colors」文檔保存在相同的路徑中；之后所有原子級UI元素的Libraries文檔也都將被保存在這里。

每個圖標都被放置在相同規格的24×24像素的畫板當中，下面鋪著24×24像素的透明圖層以確保規格統一。然后我會從AIN-colors Library當中選擇恰當的顏色Symbol插入到圖標畫板當中，覆蓋在圖標圖層之上，并將其尺寸調整為24×24像素。

接下來，將圖標設置為蒙板「按住Control鍵，點選圖標，在菜單中選擇Mask」，如此一來，我們剛剛從AIN-Colors Library當中插入的Symbol就能將其顏色附著到圖標形狀的蒙板上了。

需要注意，在Sketch左側的圖層列表當中，帶有連環圖標的便是從外部Libraries插入的Symbols。

這里的核心思路在于Libraries的嵌套。通過這種方式，每當我需要修改顏色定義，只需要在「AIN-colors」文檔中進行編輯，然后所有用到了這個顏色的圖標或其他UI元素就會自動更新了。

現在，我們就可以將圖標畫板轉換為Symbols了。需要注意的是，對于這些圖標畫板，要確保在右側檢查器中選中「Adjust content on resize」；此外還要將圖標的Resizing選項設置為四邊同時吸附，并鎖定寬高比例，以確保圖標Symbols在實際使用的時候可以被靈活地調整大小。

重復這一過程，直到完成所有圖標Symbols的定義。期間同樣要注意層級化的命名方式，以便最后可以通過Symbols Organizer插件將它們組織起來。

第四步：將圖標定義文檔添加到Libraries體系

具體方法與我們在第二步當中描述的相同。

此時，我們已經完成了兩個Libraries文檔的創建，對于我的情況來說，就是「AIN-colors和AIN-icons」?，F在我們的圖標已經可以通過Libraries的方式被其他文檔統一調用了。

第五步：重復以上步驟，對其他元素進行定義

希望前面四步的介紹已經可以幫你了解到流程的主旨。

你可以參考這樣的方式繼續完善其他基礎元素的定義，期間始終保持Libraries的逐層嵌套。

在我們的AIN設計體系當中，同類元素還包括按鈕、表單元素等等；這些Libraries文檔與「AIN-colors和AIN-icons」一起被保存在同一個路徑當中，當我開始制作分子或更高級別UI元素的Libraries時，便會進行調用。

Libraries的更新

隨著產品的進化，你總會需要對核心Libraries當中的某些元素進行更新。Sketch提供的機制使這件事變得很簡單，你只要在Libraries文件當中像操作普通Symbols那樣進行修改便可以，然后所有調用過這些Symbols的Sketch文件都會收到更新提示「Sketch界面右上角」。點擊提示信息，查看變更并進行確認，所有更新工作就會自動完成。

接下來

完成了所有原子級別UI元素的定義之后，你就要著手整理更為復雜的元素了，例如「分子」，然后是「有機體」，等等。整個過程中，你都可以對之前創建的各級Libraries進行嵌套，通過小顆粒元素組合大顆粒元素。

以此類推，這套基于Sketch Libraries機制逐層構建的設計體系終將越發復雜和完善，并最終有能力幫你實現完整的界面。屆時，你便可以在任何項目當中對這套體系進行調用。

在本文的后續部分中，我將帶各位一起了解一下創建更為復雜的組件的過程，可能包括頁頭、導航、卡片視圖、頁腳等部分；同時也將展示如何在實際當中使用這套設計體系。

需要說明的是，原子化設計理論只是一種指導原則，而非硬性規則，你最終還是需要一邊結合理論，一邊根據自己產品的特定情況來判斷以怎樣的方式對UI元素進行層級劃分。

此外，關于Libraries在多設備之間的同步使用，我個人目前還沒有涉及到這方面的實際運用。正如Sketch在官方文檔之中建議的，你可以通過Dropbox、Google Drive或類似的存儲服務來實現同步；這對于團隊共享和協作將非常有用。

總結

在本文中，我們一同了解了如何使用Sketch Libraries構建模塊化的UI組件庫/設計體系，希望此時你已經感受到了Libraries功能的巨大潛力。

如果你是設計團隊中的一員，或是一名需要更好的方式來管理項目的獨立設計師，那么不妨試著將Libraries功能運用到設計流程當中。自Symbols以來意義最為重大的新功能將能越發有效的幫助我們構建和維護設計體系。

你可以下載我提供的范例項目作為參考，其中包括了顏色、圖標、按鈕等元素的定義，以及一個簡單的項目案例。希望這套范例能幫你更好的理解本文的內容。需要注意，你需要更新到Sketch 47才能打開這份文檔。

相關資源：

• Sketch Libraries?by Jon Moore
• Brad Frost’s?Atomic Design Methodology
• Pablo Stanley on?Sketch Libraries
• Airbnb:?Building a Visual Language

原文作者：Harry Cresswell

原文地址：Usejournal

譯者：C7210，交互設計師、UX設計熱愛者、VR探索者、譯者、貓奴、吉他手、鼓手，現就職于騰訊上海

譯文地址：Be For Web

題圖來自 unsplash