如何利用Figma構建組件庫？我們團隊總結了這篇經驗

最近團隊嘗試使用Figma構建一套適用團隊的組件庫與規范，發現Figma比Sketch的構建方式要更簡單和更靈活，尤其是自動布局（Auto Layout）和聯級嵌套能極大提升組件庫的設計靈活度；另外Figma插件庫日新月異，能夠有效提升組件庫在構建過程中的效率。本文主要分享了我們團隊在創建組件庫中的一些經驗方法。

首先我們確定組件庫框架包含哪些內容，這里主要針對ToB端的業務場景來進行演示。

組件庫框架

B端業務組件庫框架內容相比C端產品的要復雜且難以上手，除了對產品業務的理解和掌握之外，組件庫到底有哪些內容？針對我們團隊所接觸的B端業務場景進行需求整體、分析、調研并抽象出具體的組件庫框架：

• 主題樣式
• 基礎組件
• 框架模式
• 拓展控件
• 通用模板
• 規范映射表

可根據項目業務或產品場景需求去對框架內容進行調整。

以下內容會按照構建順序進行拆解

主題樣式

1. 顏色

首先是顏色樣式的創建，顏色通常會包含主題（品牌）色，中性色或者輔助色，在Figma中我們唯一需要做的是對這些顏色進行命名管理；創建第一個顏色樣式后通過在文件標題的下拉菜單中進行首次樣式發布，發布成功即可在其他Figma文件中引用。

△ 顏色的創建階度可以借助 Material Design Color tool 工具來輔助生成

2. 字體

Figma的字體樣式與Sketch的創建方式不同，Figma中只需要關注字號與字重即可，而過去在Sketch中除了對字號、字重創建以外還需對字體的對齊方式進行創建，這樣會增加樣式庫的管理維護成本，同時也增加了使用難度。

在Figma中我們只需關注組件庫需要用到的字號以及少量的字重，這里建議樣式創建要克制，盡可能保證樣式庫精簡適用。字號我們采用 12px-64px，使用了Regular和Bold兩種字重。

選擇一款字體（推薦思源黑體），字體需要考慮團隊協作中存在不同終端的適配問題，如果使用蘋方則Win系統中會出現字體丟失的情況，中文字體的使用插件 Chinese Font Picker 。

3. 圖標

圖標在之前的組件庫搭建中存在兩種嵌套方式，第一種是目前推薦的直接使用Svg的方式，通過導入Svg圖標進行并創建成組件進行管理使用，輸出則選擇性輸出即可。第二種是將圖標庫編譯成一個字體包，通過字體的方式去引用和管理，字體圖標的應用方式依然在許多B端系統上可見，過去存在瀏覽器版本和兼容性問題，字體圖標是當時最好的選擇；缺點是維護成本較高，圖標字體包無法選擇性引用，字體包的大小會影響頁面加載性能。

4. 圖標的批量創建與管理

在Figma中我們可以很輕松的去創建一個圖標庫，得益于Figma支持批量創建Component，批量創建完以后我們再通過插件來實現圖標組件的批量重命名。Rename It（重命名插件）Find & Focus（批量查找插件）

5. 陰影

陰影樣式的創建相對簡單，設置好陰影參數與對應命名并逐個創建即可。

6. 圓角

組件庫中常用到圓角，圓角屬于組件庫中的一種樣式變量，圓角有很強的風格屬性，因此過去我們會對圓角進行單獨管理以方便后期對組件庫中的圓角進行全局管理，在Figma中圓角沒有單獨的樣式管理屬性，只需要對圓角進行規范定義即可。圓角在組件庫中存在多種屬性狀態，例如按鈕組中就存在左右結構的半圓角屬性，應該在組件庫的創建過程中就提前考慮并約束。

7. 間距

在Figma中間距需要組件化（Component），自動布局（Auto Layout）可以算Figma組件化中的殺手锏，通過簡單的屬性設置就可以實現自動布局效果；在間距創建中需要對橫向（X軸）以及豎向（Y軸）分別進行創建并以不同的樣式來區分，當然所有的間距都是通過母版（Master Component）進行復制創建的，這樣可以通過母版來對全局的間距進行樣式管控。

間距的數值設定可根據設計規范進行調整，我們采用了4px-256px的倍數區間，可以適應大部分業務場景。

規范映射表

1. 規范映射表

為什么需要規范映射表？當組件庫的樣式、組件、組件狀態到一定的數量就難以維護，設計與開發對接成本會顯著增高；如果我們通過一個映射表來對應組件庫中的樣式和組件，提取組件庫中的變量并設定映射名稱，減少對樣式或組件本身的依賴性，而是通過修改映射參數來實現組件庫變更。

映射表中常需要對樣式中的顏色、字體、圓角、陰影、間距等樣式進行映射關聯，這些常用變量在開發過程中可以通過代碼進行關聯與 Figma中的組件庫關聯是一致的。

基礎組件

1. 按鈕

我們通過對按鈕組件的構建進行剖析基本能夠掌握組件構建的基本原理，其他組件的構建方式基本無異，只存在嵌套層級的多少差異。

在構建組件之前我們可以學習 Atomic Design （原子設計）能幫助你深入了解構建原理。

組件庫的構建方式完全可以采用原子設計理論構建：

Brad Forst（原子設計作者） 將此理論運用在界面設計中，形成一套設計系統，包含5個層面：原子、分子、組織、模板、頁面。

在組件庫搭建中，原子屬于最小顆粒度單位，例如：任一形狀、文字、顏色、圖標等。

組件搭建除了需要掌握其構成原理之外還需要了解每一個組件的類型、狀態、規格等信息，這些將是組件庫的核心內容。

以按鈕為例，在ToB側Web端業務系統中常用到三種尺寸規格（24px、32px、40px），常用狀態包含：Normal、Hover、Focused、Pressed、Disabled；按鈕還擁有多個不同類型例如：Primary、Outline、Dashed、Danger，當一個組件存在多種形態時意味著組件的復雜程度提升，維護成本增加。

通過之前的組件庫構建經驗來看，不同形態的相同組件的結構一致，只存在樣式差異，而Figma剛好滿足這一需求，在相同的母版（Master Component）下的副件可以單獨設置樣式并不會影響與母版之前的關聯（Sketch無法讓副件與母版存在樣式差異）。

我們創建一個涵蓋所有按鈕形態的母版，通過拷貝副件并對副件進行樣式變更形成新的按鈕狀態，選中已經變更樣式的副件創建為新的組件（Component），這樣就實現了組件分級嵌套效果。

△ 組件分級嵌套效果演示

組件分級嵌套可以幫助我們更加靈活的管理組件庫，上圖Master A為組件母版，而A1、A2、A3從母版拷貝而來（副件），對副件進行樣式修改后創建為新的組件并拷貝至A1_1、A1_2、A1_3，這樣就實現A 管控 所有A的副件，而A1可以單獨對A1_1進行管控而不影響其他副件。

拓展控件

1. 卡片

卡片屬于拓展控件可以對應 Atomic Design 中（原子、分子、組織、模板、頁面）里的「組織」，「組織」是通過原子或分子組合構成。

相比按鈕，卡片在搭建過程中使用了間距；布局單一的按鈕只需要通過自動布局（Auto Layout）就可以滿足，而靈活多變的卡片則需要通過間距來配合自動布局實現最終效果。

在復合組件中需要滿足模塊替換的靈活性，我們通過給組件劃分為不同模塊，而模塊中的內容可以自由定制。

△ 卡片組件的分解圖

通過分解圖我們可以了解需要替換的模塊必須為組件態（Component）且尺寸一致，滿足條件后只需選中該模塊右側屬性面板進行替換即可。

框架模式

1. 頁面布局/柵格

Figma中的布局網格（Layout Grid）只針對畫布有效，因此在創建柵格布局前需要選中一個有效畫布，在右側屬性面板可以選擇列（Columns）行（Rows）或格（Grid）新建，設置好布局網格畫布里面的元素在靠近網格邊線時會有吸附效果可以輔助設計的準確性。

2. 頁面結構

左右結構在ToB業務場景比較常見，類似的頁面結構我們只需要把左側的菜單和頭部創建單獨的組件模塊即可。

通過組件嵌套我們可以輕松管理一套組件庫兩套顏色模式（淺色版與深色版）

通用模板

1. 概覽&Dashboard

通過原子、分子、組織構建模板，而模板的組合就能形成各種場景頁面。

通過自動布局（Auto Layout）我們可以對較為復雜的表格組件進行合理管控，例如新增刪除都能按照既定間距進行自動拓展。

同時通過組件嵌套實現表頭帶動表內容進行聯動，極大的提高了在復雜場景下的設計效率。

最后

組件庫的意義在于能夠建立設計約束，保證設計一致性；更重要的是能夠為產品/團隊規范設計輸出，提升設計效率。

組件庫的搭建需要因地制宜，根據產品或團隊需求去構建，保持組件庫輕量高效是我們的目標；一切能夠提升設計效率的可能性都應該值得嘗試。

歡迎關注作者微信公眾號：「AsiaInfo Design」