一、背景

在設(shè)計系統(tǒng)的建設(shè)中，組件化是提升效率與保持一致性的核心手段。過去很多設(shè)計師習(xí)慣用 Sketch 來進(jìn)行組件搭建，但隨著團(tuán)隊協(xié)作規(guī)模的擴(kuò)大、交付場景的復(fù)雜化，Sketch 在多端適配、跨文件協(xié)作、動態(tài)主題管理等方面逐漸顯露出不足，對比這兩年在聚光燈下的另一款設(shè)計軟件Figma ，其在組件化設(shè)計上的優(yōu)勢更加明顯：

1. 組件具備更強(qiáng)的嵌套與變體能力，能高效應(yīng)對復(fù)雜交互和狀態(tài)切換。
2. 借助變量和模式，設(shè)計稿可以模擬主題切換。

因此，使用 Figma 搭建組件，不僅僅是提升了設(shè)計的復(fù)用率，還大大提升了組件編輯效率，降低后續(xù)的管理維護(hù)成本。接下來本文將圍繞Figma 搭建組件的思路展開，從能力介紹、結(jié)構(gòu)劃分、設(shè)計庫DPL逐步拆解如何高效構(gòu)建一個可復(fù)用、易維護(hù)的設(shè)計系統(tǒng)。

二、Figma的特有能力「變量系統(tǒng)」

1. 變量系統(tǒng)

組件參數(shù)化可以理解為是一組變量數(shù)據(jù)，本質(zhì)上就是把「設(shè)計屬性」參數(shù)化，抽離成獨(dú)立的可復(fù)用數(shù)據(jù)源，然后在不同的UI元素中引用。

目前Figma內(nèi)的變量類型包括：顏色/數(shù)值/字符串/布爾變量，借助這些變量的映射，通過規(guī)劃多層級的Token進(jìn)行層層調(diào)用，可以在組件的搭建、后續(xù)修改維護(hù)成本大大降低。

我們對比下Sketch和Figma在顏色調(diào)用上的區(qū)別：

Sketch：通過圖層樣式或顏色變量進(jìn)行封裝，定義后可以在填充/描邊/文本顏色等屬性里直接調(diào)用，但它本質(zhì)是一個「色值案例」的概念沒有多層級關(guān)系，如果想要做多層級的映射關(guān)系「某個變量依賴另一個變量」是完全無法做到的。

Figma：直接使用色值封裝，本質(zhì)上是數(shù)據(jù)，支持「變量引用變量」，可以綁定到任何調(diào)用顏色的屬性上，同時支持多層級傳遞。

以下圖為例，常規(guī)組件封裝以單一色值對應(yīng)組件的顏色，一對一的關(guān)系，或者再進(jìn)一步，封裝顏色為實(shí)例，組件調(diào)用封裝顏色，但因?yàn)椴恢С侄鄬蛹墸?dāng)toast的組件icon顏色需要變更時，就需要新增一個顏色，或者對應(yīng)關(guān)系進(jìn)行修改，這種處理單一組件影響不大，但當(dāng)有多種狀態(tài)時（不同尺寸、狀態(tài)、類型）的工作量是激增的，而在變量映射中，無論是修改單/多個，僅需要把調(diào)用的關(guān)系節(jié)點(diǎn)進(jìn)行單次修改就可以進(jìn)行批量替換。

三、組件庫核心要素之一「色彩」

最早在美間的業(yè)務(wù)組件搭建中，對于色彩的理論調(diào)研我們總結(jié)了一些結(jié)論，其中一個關(guān)鍵的概念：可感知訪問性。目前市面中組件庫搭建使用的兩大主流色彩模型HSL、HSB， 最大的缺點(diǎn)就是存在感官亮度不一致的問題，即同等飽和度、亮度的條件下，不同色相的感官亮度存在差異。

引用：在 HSL 色彩空間中，調(diào)整色相 H 展示從HSL(0deg, 100%, 50%)到HSL(360deg, 100%, 50%)的漸變條，即是設(shè)計師選擇色相時的「彩虹條」

由于人眼的視覺感知存在非均勻性，不同波長的色彩對三種視錐細(xì)胞的刺激強(qiáng)度并不相同，因此我們會覺得彩虹帶上的某些顏色更明亮，而另一些則相對暗淡，去掉飽和度后可以更直觀地看出在黃綠色區(qū)間更亮，而在藍(lán)色區(qū)間較暗。

由于各個色相的感知亮度不均勻，可能發(fā)生非預(yù)期的變化，與同一個背景上的紫色文字相比，同樣 HSL 亮度的黃色文字很難看清。

引用：在 HSL 色彩模型中，顏色的明度越接近 0% 或 100% ，飽和度的效果就會越弱 —— 在 50% 的亮度時，同樣的飽和度看起來比在 90% 時更加鮮艷。

同樣在 HSB 色彩模型中等亮度分量在感知上不均勻，難以評估色彩可訪問性。當(dāng) HSB 色相偏移時，感知亮度也會發(fā)生非預(yù)期的變化（亥姆霍茲-科爾勞施效應(yīng)、阿布尼效應(yīng)）。

如果基于有問題的模型去制定的色彩體系，這會導(dǎo)致組件使用不完善的色彩對比，內(nèi)容對比度在某些情況下會不易瀏覽閱讀，即不符合WCAG對比度模型（在對比度檢驗(yàn)規(guī)則上同樣未考慮感知亮度的因素）或者更先進(jìn)的APCA模型，而解決上述的問題就需要使用可感知訪問性的色彩模型，即OKLCH色彩空間模型「國際上為了解決感官亮度不一致的問題，CIE（國際照明委員會）在 1976 年定義了新的色彩規(guī)則，有了CIELAB色彩模型，后續(xù)又衍生了CIEHSL、CIEHSB等等，不過CIE系列模型在色彩感知上還有一些問題，后續(xù)又不斷優(yōu)化算法，有了OK系列的色彩模型，感興趣可以自行查閱相關(guān)資料了解色彩空間的衍變歷史」。

四、組件搭建思路「嵌套」

了解了Figma的核心能力，以及組件的色彩規(guī)則制定后，就要規(guī)劃組件結(jié)構(gòu)的關(guān)系，這其中的關(guān)鍵是對組件嵌套關(guān)系進(jìn)行梳理。通過對頁面的結(jié)構(gòu)化拆解，會發(fā)現(xiàn)不同類型的容器存在共性，即大多都是由標(biāo)題區(qū)、內(nèi)容區(qū)、頁尾/按鈕區(qū)等組成，而不同區(qū)域的元素又是各種組件組成。

通過有序組合這些小組件，構(gòu)建出更高層級的復(fù)合組件，高級的復(fù)合組件又組成了頁面，這樣的方式不僅有助于簡化組件庫的結(jié)構(gòu)，也提升了整個系統(tǒng)的靈活性與復(fù)用性。小組件的獨(dú)立性讓維護(hù)更具可控性，大幅降低后期迭代與修改的成本，同時每層組件都可被上一級調(diào)用，且其變體隨層級抬升統(tǒng)一繼承與展示。可以讓設(shè)計具備清晰結(jié)構(gòu)、可復(fù)用、易擴(kuò)展、一致性強(qiáng)，并且與開發(fā)思維保持對齊，最終提升設(shè)計系統(tǒng)的可維護(hù)性與協(xié)作效率。

原子組件

1. 最小UI單元，無法再拆分（如按鈕、單選框、輸入框等），依賴設(shè)計tokens（顏色、字號、間距、圖標(biāo)等）構(gòu)建，以保證風(fēng)格統(tǒng)一且可復(fù)用。
2. 在Figma中為基礎(chǔ)組件并作為上層組件構(gòu)建的素材。

子組件

1. 可嵌套由多個原子組件構(gòu)成的組合單元，形成的布局模塊，例如彈窗的按鈕區(qū)域、標(biāo)題區(qū)、內(nèi)容區(qū)等；表單字段組合（標(biāo)題 + 輸入框 + 錯誤提示）等。
2. 在Figma中使用組件嵌套嵌入原子組件，并可被上層組件調(diào)用。

父組件

1. 獨(dú)立可用的組件塊，用子組件與原子組件構(gòu)成具體功能組件。例如如彈窗組件、圖片預(yù)覽組件等完整模塊，能單獨(dú)使用或配置參數(shù)（尺寸、狀態(tài)、變體）。

業(yè)務(wù)組件

1. 使用父組件、子組件、原子組件組合形成完整業(yè)務(wù)界面或組合部件。例如完整的集成表單、頁面片段、模塊化頁面。

五、案例解析

以彈窗組件為例，在Sketch中需要把不同狀態(tài)，類型都要窮舉出來進(jìn)行封裝，當(dāng)某些元素需要修改時，調(diào)用該元素的組件就需要逐一排查，無論封裝還是后續(xù)維護(hù)的成本都很高

而在Figma中，僅僅需要幾個變體類型，就可以完成全部內(nèi)容形式的組合調(diào)用，我們可以通過圖示演示實(shí)現(xiàn)過程

以彈窗為例，按鈕變體合集作為原子組件被上級區(qū)域組件調(diào)用，不同的區(qū)域組件又被嵌套組成了彈窗組件，整個彈窗組件就可以通過變體選項控制調(diào)用目標(biāo)組件形態(tài)，不計算按鈕組件的多種變化，僅通過標(biāo)題區(qū)變體2個，按鈕區(qū)變體6個，就可以組成2*6=12種組合，如果再設(shè)置其他例如尺寸、狀態(tài)、類型等維度的參數(shù)控制，可以演變出上百種組合，在Figma中僅需要按照結(jié)構(gòu)化組件維度封裝關(guān)鍵子組件，搭配組件嵌套和變體配置就可以實(shí)現(xiàn)。

如彈窗標(biāo)題區(qū)、內(nèi)容區(qū)、按鈕區(qū)分別對應(yīng)3、4、5種樣式，在Sketch需要封裝的個數(shù)就是3*4*5=60個，在Figma僅需3+4+5=12個，其工作量成倍減少，而使用結(jié)構(gòu)化的封裝好處還包括后續(xù)優(yōu)化，也只需更新最小節(jié)點(diǎn)的組件即可，調(diào)用其組件的上層組件會自動覆蓋更新。

以上就是使用Figma進(jìn)行組件搭建的思路拆解，可以總結(jié)為“組合式的模塊化設(shè)計”，通過引用關(guān)系實(shí)現(xiàn)組件的積木化搭建，讓設(shè)計系統(tǒng)更具復(fù)用性、擴(kuò)展性和一致性。其次無論是從效率、協(xié)作，還是與開發(fā)的銜接來看，F(xiàn)igma在組件搭建上的優(yōu)勢都是十分巨大的。它不僅提供了更強(qiáng)大的嵌套與變體能力，還通過變量與模式讓設(shè)計稿具備了“動態(tài)系統(tǒng)”的特性，大大節(jié)約設(shè)計在重復(fù)性工作中投入的時間，去投入到更有價值的工作中去。

作者：群核科技用戶體驗(yàn)設(shè)計