一、背景

在設計系統的建設中，組件化是提升效率與保持一致性的核心手段。過去很多設計師習慣用Sketch來進行組件搭建，但隨著團隊協作規模的擴大、交付場景的復雜化，Sketch 在多端適配、跨文件協作、動態主題管理等方面逐漸顯露出不足，對比這兩年在聚光燈下的另一款設計軟件Figma，其在組件化設計上的優勢更加明顯：

組件具備更強的嵌套與變體能力，能高效應對復雜交互和狀態切換。 借助變量和模式，設計稿可以模擬主題切換。

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

二、Figma的特有能力「變量系統」

1. 變量系統

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

目前Figma內的變量類型包括：顏色/數值/字符串/布爾變量，借助這些變量的映射，通過規劃多層級的Token進行層層調用，可以在組件的搭建、后續修改維護成本大大降低。

我們對比下Sketch和Figma在顏色調用上的區別：

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

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

以下圖為例，常規組件封裝以單一色值對應組件的顏色，一對一的關系，或者再進一步，封裝顏色為實例，組件調用封裝顏色，但因為不支持多層級，當toast的組件icon顏色需要變更時，就需要新增一個顏色，或者對應關系進行修改，這種處理單一組件影響不大，但當有多種狀態時（不同尺寸、狀態、類型）的工作量是激增的，而在變量映射中，無論是修改單/多個，僅需要把調用的關系節點進行單次修改就可以進行批量替換。

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

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

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

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

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

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

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

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

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

了解了Figma的核心能力，以及組件的色彩規則制定后，就要規劃組件結構的關系，這其中的關鍵是對組件嵌套關系進行梳理。通過對頁面的結構化拆解，會發現不同類型的容器存在共性，即大多都是由標題區、內容區、頁尾/按鈕區等組成，而不同區域的元素又是各種組件組成。

通過有序組合這些小組件，構建出更高層級的復合組件，高級的復合組件又組成了頁面，這樣的方式不僅有助于簡化組件庫的結構，也提升了整個系統的靈活性與復用性。小組件的獨立性讓維護更具可控性，大幅降低后期迭代與修改的成本，同時每層組件都可被上一級調用，且其變體隨層級抬升統一繼承與展示?？梢宰屧O計具備清晰結構、可復用、易擴展、一致性強，并且與開發思維保持對齊，最終提升設計系統的可維護性與協作效率。

原子組件

最小UI單元，無法再拆分（如按鈕、單選框、輸入框等），依賴設計tokens（顏色、字號、間距、圖標等）構建，以保證風格統一且可復用。 在Figma中為基礎組件并作為上層組件構建的素材。

子組件

可嵌套由多個原子組件構成的組合單元，形成的布局模塊，例如彈窗的按鈕區域、標題區、內容區等；表單字段組合（標題 + 輸入框 + 錯誤提示）等。 在Figma中使用組件嵌套嵌入原子組件，并可被上層組件調用。

父組件

獨立可用的組件塊，用子組件與原子組件構成具體功能組件。例如如彈窗組件、圖片預覽組件等完整模塊，能單獨使用或配置參數（尺寸、狀態、變體）。

業務組件

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

五、案例解析

以彈窗組件為例，在Sketch中需要把不同狀態，類型都要窮舉出來進行封裝，當某些元素需要修改時，調用該元素的組件就需要逐一排查，無論封裝還是后續維護的成本都很高

而在Figma中，僅僅需要幾個變體類型，就可以完成全部內容形式的組合調用，我們可以通過圖示演示實現過程

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

如彈窗標題區、內容區、按鈕區分別對應3、4、5種樣式，在Sketch需要封裝的個數就是3*4*5=60個，在Figma僅需3+4+5=12個，其工作量成倍減少，而使用結構化的封裝好處還包括后續優化，也只需更新最小節點的組件即可，調用其組件的上層組件會自動覆蓋更新。

以上就是使用Figma進行組件搭建的思路拆解，可以總結為“組合式的模塊化設計”，通過引用關系實現組件的積木化搭建，讓設計系統更具復用性、擴展性和一致性。其次無論是從效率、協作，還是與開發的銜接來看，Figma在組件搭建上的優勢都是十分巨大的。它不僅提供了更強大的嵌套與變體能力，還通過變量與模式讓設計稿具備了“動態系統”的特性，大大節約設計在重復性工作中投入的時間，去投入到更有價值的工作中去。

作者：群核科技用戶體驗設計

---