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

看完本文你會學(xué)到：

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

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

注意：Libraries功能僅在最新的Sketch 47當(dāng)中提供。

所謂設(shè)計，就是在一系列約束條件下構(gòu)建解決方案的過程。——Adam Morse

從某種程度上講，設(shè)計體系便是這樣的一種約束。諸如配色、圖標(biāo)、按鈕等一系列設(shè)計語言要素共同構(gòu)成了標(biāo)準(zhǔn)化的體系，為設(shè)計決策提供著指引。

遵從于這樣的標(biāo)準(zhǔn)化體系，設(shè)計流程能夠得到有效加速；同時，設(shè)計模式的復(fù)用性與一致性也將得到提升，產(chǎn)品設(shè)計方案整體更具擴(kuò)展性，更易于維護(hù)。

然而在現(xiàn)實當(dāng)中，創(chuàng)建和維護(hù)標(biāo)準(zhǔn)化設(shè)計體系的方式卻多種多樣。Sketch是我們在設(shè)計工作當(dāng)中的利器，可以幫助我們簡化設(shè)計體系的創(chuàng)建流程，但其自身在各方面存在的問題也是無法忽視的。

問題所在

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

這為什么是問題？

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

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

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

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

從前的處理方式

我們曾經(jīng)使用一套Sketch模板來集中放置所有的Symbols，這種方式參考了原型制作工具M(jìn)arvel官方的設(shè)計規(guī)范創(chuàng)建方法。在此基礎(chǔ)上，我們進(jìn)行了一定程度的擴(kuò)展，例如在不同的Sketch文件當(dāng)中通過Craft插件統(tǒng)一調(diào)用Symbols模板文件。

使用Craft插件構(gòu)建組件庫

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

Symbols功能的本質(zhì)目標(biāo)是使項目更易于創(chuàng)造和維護(hù)。然而，強(qiáng)大的復(fù)用能力只是其中的一個方面；對于那些已經(jīng)被插入到不同文檔當(dāng)中的Symbols，你根本無法進(jìn)行統(tǒng)一管理與更新。

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

解決方案

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

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

這種統(tǒng)一管理和調(diào)用的機(jī)制可以為工作帶來諸多益處，包括：

• 減小文件尺寸
• 增強(qiáng)Sketch的性能表現(xiàn)
• 提升界面元素的統(tǒng)一性
• 提升項目整體的可維護(hù)性

Sketch官方團(tuán)隊是這樣詮釋Libraries功能的：

一個Library本質(zhì)上就是一個普通的Sketch文件，其中的Symbols可以被其他Sketch文件調(diào)用。如果你編輯了Library當(dāng)中的Symbols，那么調(diào)用了該Library的其他Sketch文件便會收到更新通知，你可以對變更進(jìn)行預(yù)覽、對比和確認(rèn)，使這些Sketch文件所調(diào)用的Symbols自動更新至最新版本。

使用Sketch Libraries創(chuàng)建組件庫

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

像開發(fā)人員一樣思考

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

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

從“原始元素”入手

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

原子化設(shè)計理論

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

簡而言之，原子化設(shè)計的靈感來自于現(xiàn)實世界當(dāng)中的分子結(jié)構(gòu)。UI當(dāng)中顆粒度最小的元素，即「原子」，組成了顆粒度較大的控件，即「分子」；而諸多分子又組成了更加復(fù)雜的組件與模塊，即「有機(jī)體」。

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

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

類似于開發(fā)人員使用Sass partials的方式，調(diào)用多個Libraries文檔可以使我們的設(shè)計體系更為優(yōu)雅，更易維護(hù)。經(jīng)過合理拆分的Libraries文檔將更有利于被不同的項目調(diào)用；在需要的時候，也可以更加方便地進(jìn)行擴(kuò)展。

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

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

第一步：創(chuàng)建新的Sketch文檔，用于顏色定義

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

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

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

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

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

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

如圖所示，我將AIN-colors文檔添加到了Libraries體系當(dāng)中，這樣我就可以在任何其他Sketch文件里對其進(jìn)行調(diào)用了；這便是Libraries功能的強(qiáng)大之處。

怎樣使用這些顏色Symbols呢？在接下來創(chuàng)建圖標(biāo)Library的過程中，我將進(jìn)行演示。

第三步：創(chuàng)建新的Sketch文檔，用于圖標(biāo)定義

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

每個圖標(biāo)都被放置在相同規(guī)格的24×24像素的畫板當(dāng)中，下面鋪著24×24像素的透明圖層以確保規(guī)格統(tǒng)一。然后我會從AIN-colors Library當(dāng)中選擇恰當(dāng)?shù)念伾玈ymbol插入到圖標(biāo)畫板當(dāng)中，覆蓋在圖標(biāo)圖層之上，并將其尺寸調(diào)整為24×24像素。

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

需要注意，在Sketch左側(cè)的圖層列表當(dāng)中，帶有連環(huán)圖標(biāo)的便是從外部Libraries插入的Symbols。

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

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

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

第四步：將圖標(biāo)定義文檔添加到Libraries體系

具體方法與我們在第二步當(dāng)中描述的相同。

此時，我們已經(jīng)完成了兩個Libraries文檔的創(chuàng)建，對于我的情況來說，就是「AIN-colors和AIN-icons」?，F(xiàn)在我們的圖標(biāo)已經(jīng)可以通過Libraries的方式被其他文檔統(tǒng)一調(diào)用了。

第五步：重復(fù)以上步驟，對其他元素進(jìn)行定義

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

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

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

Libraries的更新

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

接下來

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

以此類推，這套基于Sketch Libraries機(jī)制逐層構(gòu)建的設(shè)計體系終將越發(fā)復(fù)雜和完善，并最終有能力幫你實現(xiàn)完整的界面。屆時，你便可以在任何項目當(dāng)中對這套體系進(jìn)行調(diào)用。

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

需要說明的是，原子化設(shè)計理論只是一種指導(dǎo)原則，而非硬性規(guī)則，你最終還是需要一邊結(jié)合理論，一邊根據(jù)自己產(chǎn)品的特定情況來判斷以怎樣的方式對UI元素進(jìn)行層級劃分。

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

總結(jié)

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

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

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

相關(guān)資源：

• 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，交互設(shè)計師、UX設(shè)計熱愛者、VR探索者、譯者、貓奴、吉他手、鼓手，現(xiàn)就職于騰訊上海

譯文地址：Be For Web

題圖來自 unsplash