在 47 將它帶給我們之前，它一直是最重要的功能之一，也是構(gòu)建設(shè)計系統(tǒng)的一項(xiàng)關(guān)鍵能力。

用于創(chuàng)建可重復(fù)使用的界面元素，有助于保持設(shè)計的一致性。但這種機(jī)制僅限于文檔范圍，除非借助第三方插件，否則無法在不同文件之間同步。函數(shù)可以幫助我們創(chuàng)建可供多個文件使用的獨(dú)立庫。這使我們能夠提高界面元素的統(tǒng)一性，提高團(tuán)隊協(xié)作效率。本文將詳細(xì)介紹如何使用構(gòu)建設(shè)計系統(tǒng)。

文件本質(zhì)上是一個普通文件，其中的文件可以被其他文件調(diào)用。如果你編輯了一個文件，調(diào)用它的其他文件將收到更新通知，你可以預(yù)覽、比較和確認(rèn)更改。這些文件會自動更新到最新版本。

?多人協(xié)作

提高界面元素的統(tǒng)一性，提高項(xiàng)目整體的可維護(hù)性，減少重復(fù)工作

? 項(xiàng)目文件太大

減小文件大小，增強(qiáng)性能

? 獨(dú)立使用

便于理清邏輯，方便項(xiàng)目人員擴(kuò)充，保持文件界面整潔

在介紹如何創(chuàng)建組件庫之前，為了進(jìn)一步明確設(shè)計思想和原則，保證組件的可擴(kuò)展性，我們可以借鑒Brad Forst提出的原子設(shè)計方法論作為指導(dǎo)。

自然界中，原子元素結(jié)合在一起形成分子，分子又可以進(jìn)一步組合形成相對復(fù)雜的生物體，原子設(shè)計方法論的靈感便來源于此。

原子設(shè)計方法由五個不同的階段組成，它們共同協(xié)作以更慎重和更有層次的方式創(chuàng)建界面設(shè)計系統(tǒng)。

?原子

原子是構(gòu)成物質(zhì)的基本單位，所以我們用戶界面的“原子”指的是粒度最小、不可進(jìn)一步分解的基本結(jié)構(gòu)，包括基本的 HTML 元素，比如圖標(biāo)、表單標(biāo)簽、輸入框、按鈕等，也包括調(diào)色板字體等抽象元素。

? 分子

在界面中，分子是由UI元素組成的相對簡單的組織，例如導(dǎo)航欄、標(biāo)簽欄、搜索欄等。

? 有機(jī)體

生物體由許多分子和原子組成，形成更復(fù)雜的組件和模塊。例如：產(chǎn)品信息、應(yīng)用卡片、列表、Feed 流等。

? 模板

模板是頁面級對象，將組件放置在布局中并顯示設(shè)計的底層內(nèi)容結(jié)構(gòu)。

? 頁

頁面是模板的具體實(shí)例。它將實(shí)際內(nèi)容應(yīng)用于模板，并在最終界面中演示各種變量。通過實(shí)際內(nèi)容，我們可以查看組成頁面的 UI 組件是否適合提供內(nèi)容并測試設(shè)計。系統(tǒng)彈性。

例如，不同的頁面標(biāo)題有不同的字符長度，不同的用戶在個人信息頁面上看到不同的按鈕和選項(xiàng)。這些內(nèi)容的動態(tài)特性直接影響底層分子、生物和模板的構(gòu)建方式。

在創(chuàng)建之前，你需要有一個庫。層級通過名稱中的“/”符號來區(qū)分，它將被識別并自動形成相應(yīng)的結(jié)構(gòu)。參考原子設(shè)計方法論，我們將從最基本、最核心的 UI 元素開始。

步驟 1：創(chuàng)建圖層樣式組件

新建一個文件為 UI Kit，在新面板上創(chuàng)建形狀，并用不同的圖層樣式填充它們。您可以將它們命名為類型/顏色名稱sketch修改畫板顏色，例如：填充/藍(lán)色...

創(chuàng)建圖層樣式后，我們可以在設(shè)計系統(tǒng)中為每種顏色生成一個圖層樣式。

步驟 2：創(chuàng)建文本樣式

輸入一段文字，設(shè)置其大小、對齊方式、顏色等，點(diǎn)擊右欄的創(chuàng)建字體樣式，可以將其命名為文字級別/對齊方式/字體大小，例如：H1/Left/24pt...

在創(chuàng)建文本樣式時，應(yīng)提前對字體的主、次、輔助、標(biāo)題、顯示等類別進(jìn)行統(tǒng)一規(guī)劃，再針對具體場景進(jìn)行微調(diào)，建立系統(tǒng)性的設(shè)計方法有利于強(qiáng)化字體的執(zhí)行一致性，提高字體應(yīng)用的性價比，減少不必要的樣式浪費(fèi)。

步驟 3：創(chuàng)建圖標(biāo)組件

我們將每個圖標(biāo)放在相同大小的畫布上，鎖定長寬比，并“勾勒”出筆觸屬性，以確保實(shí)際使用時可以靈活調(diào)整大小。

之后，我們就可以將第一步創(chuàng)建的顏色插入到圖標(biāo)畫板中，覆蓋在圖標(biāo)層上，并將圖標(biāo)設(shè)置為蒙版。

這樣我們在實(shí)際運(yùn)用圖標(biāo)組件的時候就可以改變圖標(biāo)的??顏色了。

步驟 4：創(chuàng)建控制組件

覆蓋按鈕、單選框、下拉菜單、開關(guān)等元素，在控件組件的創(chuàng)建過程中始終保持層層嵌套，并考慮顏色、大小、不同場景下的應(yīng)用狀態(tài)等多個維度。

通過頂部菜單欄（快捷鍵“+逗號”）進(jìn)入首選項(xiàng)，然后在窗口中打開“組件庫”選項(xiàng)卡。

勾選左側(cè)的復(fù)選框?qū)Q定它是否會出現(xiàn)在菜單中。單擊右側(cè)的“眼睛”圖標(biāo)，或使用空格鍵，即可預(yù)覽。單擊右下角的“添加組件庫”，然后選擇您可以添加自己的文件。

雙擊編輯時會提醒你該組件屬于外部組件庫。點(diǎn)擊后者會自動打開并定位源文件。編輯源文件意味著調(diào)用此文件的所有本地文件都會受到影響。請注意，如果你在團(tuán)隊內(nèi)部使用，編輯源文件時要小心。高層人員可能需要控制普通團(tuán)隊成員的訪問權(quán)限，比如將其設(shè)置為“只讀”。

如果想在不影響源文件的情況下進(jìn)行更改，請選擇斷開與組件庫的連接。它將被本地化并與組件庫分離。其原型也將出現(xiàn)在本地文件的“”頁面中。

注意：一旦丟失源文件的鏈接，您將無法再與其同步。其他未斷開的鏈接不會受到影響。

在文件中編輯完之后，返回本地文件，你會在窗口右上角看到一個紫色的“元件庫有更新可用”提示。

點(diǎn)擊之后會提示你當(dāng)前的部分文件需要更新sketch修改畫板顏色，你可以看到所有的修改以及新舊版本的對比，如果你不確定某些修改是否要更新到當(dāng)前本地文件中，可以選擇取消同步。

庫創(chuàng)建完成后，我們可以將其上傳到云端，與設(shè)計團(tuán)隊共同使用和維護(hù)。常用的同步軟件包括以下幾種：

? 帕迪

讓圖層自動填充間距、對齊和分布。可用于創(chuàng)建動態(tài)按鈕和對話泡泡等。

? 搬去

自由地將物品移動到任意位置。

?

按名稱快速組織頁面。

總結(jié)

現(xiàn)在我們已經(jīng)了解了如何構(gòu)建UI組件庫和設(shè)計系統(tǒng)，相信你已經(jīng)感受到了該功能的巨大潛力。

如果你的設(shè)計團(tuán)隊成員眾多，且設(shè)計項(xiàng)目規(guī)模不斷擴(kuò)大，需要更好的方式來管理項(xiàng)目，那么不妨嘗試將該功能應(yīng)用到設(shè)計流程中。

如有侵權(quán)請聯(lián)系刪除！