構建組件庫/設計系統(tǒng)這個問題是一個很長的翻譯，使用草圖庫來構建更好的設計系統(tǒng)，從理論方法到實際演示。

閱讀本文后，您將學習：

如何解決符號同步共享的問題？

使用草圖庫

更新核心庫中的元素

此外，Sketch 48 Beta已經(jīng)開始提供色彩管理功能，并且從系統(tǒng)的角度來看是一個重要的更新。

注意：“庫”功能僅在最新的Sketch 47中可用。

所謂的設計是在一系列約束下構建解決方案的過程。 —— Adam Morse

在某種程度上，設計系統(tǒng)就是這樣一種約束。一系列設計語言元素，如顏色匹配，圖標，按鈕等，共同構成了一個標準化系統(tǒng)，為設計決策提供指導。

符合這樣的標準化系統(tǒng)，可以有效加快設計過程;同時，設計模式的可重用性和一致性將得到改善，整個產(chǎn)品設計計劃更具可擴展性，更易于維護。

然而，實際上，有許多方法來創(chuàng)建和維護標準化設計系統(tǒng)。 Sketch是我們在設計工作中的工具，它可以幫助我們簡化設計系統(tǒng)的創(chuàng)建過程，但其各方面的問題都不容忽視。

問題是

在Sketch 47給我們帶來了Libraries之前，Symbols一直是Sketch中最重要的功能之一，它也是構建設計系統(tǒng)的關鍵功能。符號用于創(chuàng)建可重用的界面元素，有助于保持設計的一致性。但是，此機制的范圍僅限于文檔內(nèi)部，除非得到第三方插件的幫助，否則Symbols無法在不同文件之間進行同步。

為什么這是一個問題？

對于小型項目，這沒什么大不了的。您可以將所有設計解決方案，甚至高保真原型和流程圖放在一個文件中，Sketch不會造成任何問題。

但是，情況會因項目規(guī)模而異。出于性能效率或協(xié)作的原因，我們通常需要將項目分解為不同的Sketch文件;此時，將暴露Symphony同步共享問題。

我們的團隊有三種產(chǎn)品使用相同的符號集。這里的挑戰(zhàn)是如何確保不同項目之間的符號同步。這三個產(chǎn)品都是非常大的項目，每個源文件包含數(shù)百個Artboards，因此很難通過單個Sketch文件來攜帶它，否則文件會變得非常大。

△Sketch文件托管整個組件庫

以前的處理方法

我們使用一組Sketch模板集中放置所有符號，引用了原型工具Marvel的官方設計規(guī)范創(chuàng)建方法。在此基礎上，我們已經(jīng)擴展到一定程度，例如，Symbols模板文件由Craft插件在不同的Sketch文件中統(tǒng)一調(diào)用。

△使用Craft插件構建組件庫

事實上，我個人不推薦這種方法。文件大小確實受到控制，符號源統(tǒng)一。問題是，一旦模板中的符號發(fā)生變化，我們就無法同步已插入到不同文檔中的符號的更新。

符號功能的基本目標是使項目更易于創(chuàng)建和維護。然而，強大的重用只是一個方面;對于那些插入到不同文檔中的符號，您根本無法管理和更新它們。

幸運的是，Sketch 47為我們帶來了圖書館。

溶液

Libraries功能可以幫助我們創(chuàng)建單獨的符號庫，可以由多個文件統(tǒng)一調(diào)用。這種機制有點類似于前端開發(fā)人員熟悉的Sass。不僅如此，您還可以嵌套庫。

通常，您現(xiàn)在可以將不同類型的符號存儲在不同的Sketch文件中作為單獨的庫，例如顏色定義，圖標，按鈕，表單元素等;可以在這些源文件中調(diào)用其他項目文件。符號。修改庫源文件時，相關更改將更新為所有項目文件。

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

減小文件大小

增強Sketch的性能

改善界面元素的統(tǒng)一性

提高項目的整體可維護性

Sketch團隊正式解釋了這樣的庫功能：

庫本質(zhì)上是一個普通的Sketch文件，其中的Symbols可以被其他Sketch文件調(diào)用。如果編輯庫中的符號，則調(diào)用庫的其他Sketch文件將收到更新通知。您可以預覽，比較和確認更改，以便這些Sketch文件調(diào)用的符號自動更新為最新版本。 →草圖47庫具有圖形說明

使用草圖庫

在本文的下一部分中，我將向您展示如何使用Sketch Libraries功能創(chuàng)建UI組件庫。但在此之前，我們?nèi)孕枰吻逡恍┫敕ê驮瓌t。

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

在構建設計系統(tǒng)的過程中，設計師必須嘗試像開發(fā)人員一樣思考。 —— D.R.Y–不要重復自己

組件庫的基本概念是逐層創(chuàng)建可重用的UI元素，保持文件的輕量級和設計的一致性。

從“原始元素”開始;

我們創(chuàng)建的任何組件都由幾個“屬性”組成。這些屬性是設計系統(tǒng)中最“原始”的元素。開發(fā)人員將在代碼中為這些屬性創(chuàng)建自己的變量，以提高代碼的可重用性;對于設計師來說，同樣如此，我們可以為各種原始UI元素創(chuàng)建庫，逐層構建更高級別的庫。組件。

原子設計理論

為了確保組件庫的可擴展性，我將使用Brad Frost提出的原子設計理論作為指導。這套理論簡單易懂。

簡而言之，原子設計的靈感來自現(xiàn)實世界的分子結構。 UI中具有最小粒度的元素“原子”構成具有大粒度的控件，即“分子”;許多分子形成一個更復雜的組成部分和模塊，即“有機體”。

將不同類型的符號放在各自的庫文件中

當然，如果需要，您仍然可以將所有組件放在同一個庫文件中;我的建議是為每種類型的符號創(chuàng)建一個單獨的庫文檔。

與開發(fā)人員使用Sass partials的方式類似，調(diào)用多個Libraries文檔可以使我們的設計系統(tǒng)更優(yōu)雅，更易于維護。正確拆分的Libraries文檔對于被不同項目調(diào)用更有用;它可以在需要時更容易擴展。

參考“原始元素”方法，我們將從最基本和核心的UI元素開始，包括將在整個設計系統(tǒng)中使用的顏色，圖標等;所有“原子，分子，有機體”的UI元素也都由這些原始元素組成。

我們首先需要定義全局中使用的各種顏色。

第1步：為顏色定義創(chuàng)建一個新的Sketch文檔

對于團隊項目，我將添加“AIN”作為Sketch文件名稱的前綴，例如“AIN-Colors”等，以區(qū)別于其他項目。當然，命名慣例和習慣因人而異。如果您和我需要處理許多不同的項目，那么通過前綴區(qū)分它們的方式可能值得考慮。

我將為設計系統(tǒng)中的每種顏色生成共享樣式，并根據(jù)不同的功能對其進行分類，包括“品牌，灰度，UI”等。具體的分類方法是在共享樣式命名中使用“/”符號。表示Sketch識別并自動生成相應模式的層次結構。

接下來，我將為每種顏色創(chuàng)建一個Symbol，并使用Symbol Organizer插件在Symbols頁面中組織它們。在分層命名的幫助下，Symbols頁面將自動呈現(xiàn)清晰的架構。

第2步：將顏色定義文檔添加到庫系統(tǒng)

完成顏色定義后，我們需要將此Sketch文檔添加到Libraries系統(tǒng)。設計系統(tǒng)中所有原子元素的定義都需要此步驟。

在頂部菜單欄中，選擇“Sketch› Preferences”，然后轉(zhuǎn)到“Libraries”選項卡并單擊“Add Library”按鈕，選擇我們在上一步中創(chuàng)建的Sketch文檔。

如圖所示，我將AIN-colors文檔添加到Libraries系統(tǒng)，以便我可以在任何其他Sketch文件中調(diào)用它;這是圖書館功能的強大功能。

我如何使用這些顏色符號？我將在下一次創(chuàng)建圖標庫時進行演示。

第3步：為圖標定義創(chuàng)建新的草圖文檔

與我們在第一步中的方法類似，這次我們定義了圖標。新文檔名為“AIN-icons”，并保存在與以前的“AIN-colors”文檔相同的路徑中;所有原子UI元素的庫都將保存在此處。

每個圖標放置在24和相同的大小; 24像素畫板，24小時; 24像素透明層，確保規(guī)格統(tǒng)一。然后我將從AIN顏色庫中選擇合適的顏色符號，并將其插入圖標畫布，在圖標圖層上，并將其調(diào)整為24和次; 24像素。

接下來，將圖標設置為蒙版“按住Control鍵，單擊圖標，在菜單中選擇蒙版”，以便我們剛剛從AIN顏色庫插入的符號可以將其顏色附加到圖標形狀。面具消失了。

請注意，在Sketch左側(cè)的圖層列表中，鏈圖標是從外部庫插入的符號。

這里的核心思想是圖書館的嵌套。這樣，每當我需要修改顏色定義時，我只需要在“AIN-colors”文檔中編輯它，然后將自動更新使用此顏色的所有圖標或其他UI元素。

現(xiàn)在我們可以將圖標畫布轉(zhuǎn)換為符號。應該注意的是，對于這些圖標畫板，請務必在右側(cè)檢查器中選擇“調(diào)整調(diào)整內(nèi)容大小”;還可以在捕捉時將圖標的“調(diào)整大小”選項設置為四邊，并鎖定縱橫比以確保圖標符號在實際使用時可以靈活調(diào)整大小。

重復此過程，直到您定義了所有圖標符號。在此期間還要注意分層命名方法，以便最終可以通過Symbols Organizer插件進行組織。

第4步：將圖標定義文檔添加到庫系統(tǒng)

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

此時，我們已經(jīng)完成了兩個Libraries文檔的創(chuàng)建，在我的例子中，“AIN-colors和AIN-icons”。現(xiàn)在，我們的圖標可以通過庫中的其他文檔統(tǒng)一調(diào)用。

步驟5：重復上述步驟以定義其他元素

我希望前四個步驟的介紹可以幫助您理解該過程的主題。

您可以繼續(xù)優(yōu)化其他基本元素的定義，以便逐層嵌套庫。

在我們的AIN設計系統(tǒng)中，類似的元素包括按鈕，表單元素等。當我開始制作分子或更高分子時，這些庫文檔與“AIN-colors和AIN-icons”一起存儲在同一路徑中。調(diào)用UI元素的庫。

圖書館更新

隨著產(chǎn)品的發(fā)展，您將始終需要更新核心庫中的一些元素。 Sketch提供的機制使這個問題非常簡單。您可以像在普通符號中一樣在Libraries文件中修改它。然后，調(diào)用這些符號的所有Sketch文件都將收到更新提示“Sketch接口的上角”。單擊提示以查看更改并確認，所有更新將自動完成。

下一步

在完成所有原子級UI元素的定義之后，您必須開始組織更復雜的元素，例如“分子”，然后是“有機體”，等等。在整個過程中，您可以將庫嵌套在之前創(chuàng)建的所有級別，并將大粒子元素與小粒子元素組合在一起。

通過類比，這種基于Sketch Libraries機制的逐層設計系統(tǒng)將變得更加復雜和完整，并最終能夠幫助您實現(xiàn)完整的界面。到那時，您可以在任何項目中調(diào)用此系統(tǒng)。

在本文的其余部分，我將向您介紹創(chuàng)建更復雜組件的過程，包括標題，導航，卡片視圖，頁腳等。它還將向您展示如何在實踐中使用該設計。系統(tǒng)。

應該指出的是，原子設計理論只是一個指導原則，而不是一個艱難的原則。您仍然需要結合理論并根據(jù)產(chǎn)品的特定條件判斷UI元素的分類方法。

另外，關于多個設備之間的庫的同步使用，我個人還沒有涉及到這個方面的實際應用。正如官方文檔中的Sketch所示，您可以與Dropbox，Google Drive或類似的存儲服務同步;這對團隊共享和協(xié)作非常有用。

總結

在本文中，我們學習了如何使用Sketch Libraries構建模塊化UI組件庫/設計系統(tǒng)。我希望你已經(jīng)體驗過圖書館的巨大潛力。

如果您是設計團隊或獨立設計師的一員，他們需要更好的方法來管理項目，那么請嘗試將Libraries應用于設計過程。自Symbols以來最重要的新功能將更有效地幫助我們構建和維護設計系統(tǒng)。

您可以下載我提供的示例項目作為參考，包括顏色，圖標，按鈕和簡單項目案例等元素的定義。我希望這個例子可以幫助您更好地理解本文的內(nèi)容。請注意，您需要更新到Sketch 47才能打開此文檔。

相關資源

Jon Moore的草圖庫

布拉德弗羅斯特的原子設計方法論

素描館的Pablo Stanley

Airbnb:構建視覺語言

原作者：Harry Cresswell

原始鏈接：Usejournal

« 營銷行業(yè)不斷跨越國界。企業(yè)產(chǎn)品推廣需要不斷被顛覆 | 簡單說說在QQ營銷組中竊取朋友，當天的規(guī)模運作加上數(shù)千人 »