用四大章節，幫你10分鐘學會 Figma 組件庫的搭建和使用

背景

1. 為什么需要 Figma 組件庫

當我們在做設計稿的時候，例如做一個按鈕，如果沒有做成可復用的組件，那后面在其他模塊要用到按鈕的地方可能又需要重新畫，會有很多的重復勞動。又或是另一種場景，我們需要把按鈕的尺寸或顏色統一調整，可能需要一個一個去改，很容易改錯或者疏忽。

總之，一次性設計是使設計師淪為做圖機器的罪魁禍首。如果我們提前搭建好可復用的組件模板，就可以達到復用的目的，而且可以一鍵批量修改，從而解放生產力，把更多的時間精力投入到業務需求的深入思考中。

2. Figma 組件庫在設計體系中的定位

設計體系（Design System，也可以叫設計系統）是可復用組件的集合，由清晰的標準引導，通過機制化的組織流程和具象的指南與工具加以整合，以幫助開發者（設計、研發等）高效且一致地創建大量的應用，并且動態地確保用戶體驗的一致性。

需要指出的是，設計體系不只是組件庫，不只是樣式指南。當你瀏覽上面這些案例內容的時候，你固然會看到組件庫和樣式指南，但更值得關注的是它們陳述的設計目的、設計理念、設計原則、設計模式、設計與工程同步的方法等等。

Figma 團隊做了一個專門以設計體系為題的網刊，域名為 designsystems.com。該網站有大量圍繞設計體系的文章、教程及代碼庫。

總的來講，Figma 組件庫是設計系統中的一部分，是沉淀設計規范的設計資產。作為連接設計師和設計師、設計師和開發的橋梁，組件庫首先應該是靈活易用的；其次，組件庫是需要跟隨產品不斷進化的，這就要求它是容易被維護的，否則它就會落后于產品迭代，直至逐漸被遺棄。

相關教程；

Figma 組件庫如何助力設計提效

1. 線上調用、實時同步

跨團隊使用組件庫(樣式、組件)、實時更新、組件庫的主題顏色一鍵切換、組件可以增加提示語等功能，所有的調用方式都是線上的，不需要任何本地文件的傳輸。如果組件庫有更新，只需要 Review 之后 Update 即可實時同步。

2. 多人協作、共創共建

Figma 組件庫可以有多個設計師共同創建，大家只需要約束好相應的組件層級嵌套規范，每個人可以負責自己所屬的模塊，分別更新、分別發布。

3. 靈活拼裝、自由組合

Figma 組件庫有非常高的自定義拼裝能力，不解除組件的基礎上也能夠改變一些顏色、圓角、布局間距等。對于一些特殊的業務場景，也能將基礎組件拆分開進行組合。

Figma 組件庫搭建經驗分享

1. 原子設計理論

提到組件庫，不得不提到原子構建理論。Atomic Design(原子設計)是構建 Design System 的核心指導理論。化學中，所有的物體都是由原子構成，原子組合構成分子，分子組合構成有機物，最終形成了宇宙萬物。

2013 年 Brad Forst 將此理論運用在界面設計中，形成一套設計系統，包含 5 個層面：原子、分子、組織、模板、頁面。那么對應設計系統來說，我們的顏色、字體、圖標以及按鈕、標簽等都會對應到相應的原子和分子，通過組件之間的搭配組合，最終構成頁面。

2. Foundation 全局基礎樣式

在設計系統中，基礎樣式可以理解為構成設計稿最基礎的「原子」。如果你的設計稿中全部都使用共享樣式，當后續需要調整時，只需要調整樣式庫即可，設計稿會跟著變化，而不需要一個個調整；樣式庫還可以通過 Design Token 來映射到前端代碼中，以提高最終開發的還原度。

樣式是 Figma 中的一些可以復用的模式，目前支持四種：

顏色樣式（Color）

顏色樣式可以用于填充顏色、描邊顏色、文字顏色。是頁面整體風格表現的重要基本元素，它可以建立品牌的識別性，梳理頁面的視覺層級關系，突出內容并平衡其他視覺元素。建議大家可以按照功能和屬性將顏色進行分組命名，比如，比如品牌色、成功色、警告色等，并將默認、懸浮、點擊、禁用等顏色放在一組，方便團隊其他設計師使用。

文本樣式（Text）

文本樣式中包括：字號、字重、行高和字距等。需要注意的是不要單純的將名稱命名為 T1、T2 等純符號性的名稱，可以在后面加上適當的語義化描述，比如一級標題、常規正文等文案，同時也可以在描述里添加對應的使用說明，這樣當鼠標懸浮在這個樣式上，會給用戶帶來提示性的預覽。這種辦法同樣適用于顏色、陰影等全局樣式，會更加方便大家調用且能夠很好的解除新用戶的使用疑慮。

效果樣式（Effect）

效果樣式包括：外陰影、內陰影、模糊、背景模糊等。陰影值應該遵循現實物理世界中物體的特性。因此在陰影的設定上采用了三層陰影的表達方式，讓陰影更加柔和，更符合真實光源下的物體狀態。物體的高度直接影響陰影，離地面越高陰影越大，模糊值越高，反之相反。

布局柵格（Layout Grid）

橫向和縱向布局參考。可以通過柵格樣式來制定全局的尺寸和間距規范，尤其是用在響應式網頁的設計當中，可以通過柵格來做出一些適配效果。

3.? 創建樣式

在 Figma 中創建四種樣式（顏色 Color、文本 Text、效果 Effects、柵格 Layout Grid）的操作類似。

這里以顏色為例，選中一個圖層，Fill 填充顏色之后，點擊右邊的四個點圖標，在彈出的 Color Styles 顏色樣式面板中點擊加號，然后再填寫樣式的命名就能創建了。這里補充一下命名中使用斜杠“/”可以給樣式進行分組。

4. 批量創建樣式

如果想一次性創建多個顏色樣式，可以將所有的顏色通過矩形平鋪出來之后，按下快捷鍵 Cmd+R，來批量更改好圖層命名。

然后再通過插件「Styler-Generate Styles」就能一鍵批量創建樣式，解放雙手。

以上是以顏色樣式距離，其他的文字樣式、效果樣式的創建方法也是同理。

樣式命名

樣式命名對于共享樣式庫的顯示順序十分重要，你可以通過斜線分隔命名的方式來給它們歸類。比如說你可以設置一系列的警告顏色，都以 error/ 開頭，再設置一組排版文字的顏色，都以 Text/ 開頭，這樣它們就會被自動歸類，方便你在使用時查找。一般有以下幾種分類依據：

• 按色調分類
• 按主題分類
• 按場景分類

樣式描述

給樣式添加描述和給組件添加描述作用一致，描述信息可以幫助你判斷哪里該用哪種樣式，保持團隊風格統一。另外補充一下，描述也是可以被檢索到的，例如可以嘗試名稱用英文和前端對齊，描述用中文方便英文不好的同時協作。

5. 組件類型

主組件（Main component）

在左邊圖層列表內顯示為紫色的，圖標為四個菱形組成的圖形。它作為主組件，它的變化會實時同步到它所有的實例組件中，有時也稱之為父組件。

實例組件（Instance）

對著主組件接著按下 Cmd D 復制的元素，它們在左側圖層列表內顯示為紫色的空心菱形。它們作為主組件的引用，會自動同步主組件的各個屬性變動。一個主組件可以有多個實例組件，有時我們也稱其為子組件。實例組件有以下特點：

可以修改很多屬性，比如背景色、文字內容、布局間距等，修改的屬性不會再跟著主組件同步；

圖層結構不可以改動，也不可以刪除圖層，按刪除鍵不會刪除而是隱藏圖層；
內部圖層尺寸不可以改，但是實例組件整體的尺寸可以更改。

實例的編輯可以逆向覆蓋。只要在實例替換面板中點選 Push overrides to main component，即可將當前的實例屬性同步給母版及所有的實例。

6. 組件嵌套

組件的嵌套，類似原子理論中「分子組合成組織」的過程。它所對應的元素往往是一些較為復雜的控件、卡片等。比如我們上面做的按鈕組件，將它的實例結合圖標、文案編為一個結果頁 Frame，再將 Frame 組件化即可完成一個組件的嵌套。

7. 組件集（Variants）

當我們有很多相近的組件時，可以把它們做成一個組件集（也稱變體）。這樣在引用時就不用從一堆相似組件中尋找了，只需要切換不同的多組件屬性即可。例如按鈕可以按照類型（Type）和狀態（State）共四種。

屬性切換

那么，我們就可以把它創建為一個有兩個維度屬性的變體，此時可以通過組合 Type 和 State 屬性來切換四種狀態。其中 Type 和 State 稱為屬性名，后面的選項（比如 Default、Hover）稱為屬性值。

創建組件集

創建組件集有兩種方式。一是選中多個主組件，在右側就會出現組合為變體組件集（Combine as variants）選項，點擊之后這些主組件就會被一個組件集（紫色虛線的 Frame）裝起來，在組件調用面板也變成了一個組件；二是選中沒有做成組件對普通圖層，點擊上方的 Create component set 也能創建組件集。默認會調用左上第一個屬性的組件。

組件集命名

創建組件集的時候 Figma 會自動根據組件名稱中斜線（/）分割的值來生成屬性列表，所以在創建之前推薦先按照一定規則命名。如下圖，我們按照 Button/Type/State 的格式給每個按鈕命名，Figma 會自動提取出所有可能的屬性，生成右側的屬性值列表。

屬性和值

按照上圖命名的四個按鈕組合為變體組件集之后，在右側會顯示自動分好類的屬性值，不過我們還需要手動更改一下屬性名，也就是把 Property 1 改為 State，把 Property 2 改為 Type。

組件調用

此時按下 Shift+I 打開組件調用面板，可以看到四個按鈕組件在這里只顯示為一個按鈕。拖拽一個實例組件到畫布中，我們就可以在右邊通過選擇屬性來切換不同的按鈕變體了。

屬性值順序調整

這里右側的屬性名和屬性值的顯示順序可以在變體組件集的面板中調整。從組件調用面板拖拽出來的實例組件，各項屬性值都默認選第一個，所以我們一般會把使用頻率比較大的屬性值排在第一位。

組件屬性- Boolean Property

上述實例組件右側面板中的屬性選擇都是下拉菜單的形式，如果我們的組件是現實隱藏，例如圖標左側是否帶圖標，可以通過組件屬性的現實隱藏來實現。選中圖標，點擊右側面板 Layer 右邊的箭頭，修改默認值為 True 或 False。

后面在調用的時候，就能通過開關的形式來切換是否現實圖標，同時組件集內部的數量也并不會增加，可以節省內存消耗。

組件集內增加組件

我們可以直接在變體組件集里面添加新的組件，選中變體組件集之后在右下角出現一個紫色的加號，點擊它可以添加變體組件。

組件集屬性沖突

假設我們要添加一個禁用狀態的主按鈕。點擊添加變體，此時虛線框中會復制出一個按鈕，我們把它的背景色修改。可以看到，選中變體組件集時在右側會出現屬性沖突的提示。因為這個新添加的變體組件屬性也會被復制過來，和已有的組件屬性一樣，就有了沖突。

這里發生沖突的是它的 State 屬性，它也是 Default，我們把它更改為 Disable，屬性沖突的提示就消失了。

組件集內增加屬性名

當需要增加屬性類型的維度時，可以點擊 Properties 右側的加號按鈕，創建新的 Variant，創建好之后相當于多了一個新的屬性名，便可以將每個組件設置對應屬性名的屬性值。

注意事項

變體可以幫我們避免大海撈針式的選擇，將組件切換簡化為少量屬性組合，但是在創建和使用變體時養成一些好的習慣可以幫我們更好的利用它。

并不是任何組件都適合組合在一起成為變體，我們一般把同一組件的不同狀態組合為變體；

切換變體的時候也相當于替換組件，所以我們要確保一個變體組件集內的各個組件結構和命名一致，這樣在切換的時候已修改的屬性才會被保留；

如果需要解除變體組件集，可以直接將組件從虛線框內拖拽出來，全部拖拽出來這個組件集虛線框就會消失；

組件集也是一個 Frame，不過是一個特殊的 Frame，這個紫色虛線框是可以修改的，你還可以給它添加自動布局屬性來自動排布里面的組件變體；

使用 Config 2022 更新的組件屬性中的新功能，例如 Boolean Property、Swap Instance Property，可以一定程度上減少組建集內部的組件數量，避免巨型變體組件集，如果 一個變體組件集內有幾千個組件，可能會消耗大量內存，導致操作 Figma 卡頓。

Figma 組件庫的發布、更新和使用

組件庫制定的意義，就是讓團隊每一位成員都能用到最新的組件，提升效率、保證一致輸出。那么接下來就講一下如何在 Figma 中發布、更新和適用組件庫

1. 發布組件庫

Asset 點擊 Team library 按鈕（書本圖標）；

Library 面板上，點 Publish；

二次確認面板，再次點擊 Publish 即可發布成功；

2. 發布頻率

當組件庫發生變動，維護者發布后使用者在文件中會收到通知，來決定是否同步更新到設計稿。如果維護者頻繁發布，使用者也會頻繁收到通知，所以最好將更新發布固定在一定頻率，比如每天下午六點發布一次，這樣使用者只需要每天早上更新一次就可以了。

3. 私有組件 Private components

當組件庫中有一些臨時或者很少復用的組件，可以給這些臨時組件的命名前加上 _ 或者 .，也就是英文符號下劃線或點。在發布組件庫的時候，Figma 會自動隱藏這些私有組件，這樣你在構建組件庫的時候可以遵循原子化方法，同時發布出去給其他設計師使用的組件庫也很簡潔，不會有一些臨時組件。

4. 復用組件庫

創完了組件庫，團隊成員的復用步驟如下：在 Tteam library 開啟想生效的組件庫，開啟后在 Assets 中就可以找到組件庫對應的組件然后復用，可以通過分組形勢查找，也可以通過關鍵詞模糊搜索。

5. 更新組件庫

組件庫也可以理解成是設計團隊的一個小的產品，也是需要不斷更新迭代的，當我們的組件庫有更新內容的時候，可以和發布組件時進行同樣的操作，點擊 Assets 面板中的 Team Library 按鈕，就能將在組件庫中修改的內容發布更新至云端。

6. 同步云端組件庫

當原組件庫發生變化，Figma 右下方回彈出一個提示框，點擊 Review 進行查看，可以預覽所有在本文件中用到的組件庫中的組件的更新的情況，確認之后點擊更新，即可將變化同步到所有用到此組件庫的文件。通過這種更新同步組件庫的方式，便能夠達到一鍵修改，全劇替換的便捷操作。

7. 復制組件的注意事項

組件通過復制粘貼來復用只適用于兩種情況：對于同文件下完全適用；對于跨文件的情況，組件只有在作為組件庫發布后才可以跨文件粘貼復用（，否則，復制粘貼的方式只能直接拷貝母版，無法以實例的狀態拷貝！

比如上面做好的 Button 組件，同文件復制粘貼沒有問題。但對于跨文件復用的場景，如果跳過發布，由文件 A 直接拷貝到文件 B，拷貝后顯示的就是沒有正確復用的 Main component 狀態；只有在 Libraries 發布后，拷貝到文件 B 時才顯示為被復用的實例狀態。

8. 組件的替換

組件的替換主要有兩種形式，一種是組件與組件的切換，點擊右側面板組件名稱的下拉選擇器，例如從按鈕切換到復選框，屬于兩個完全不同的組件切換；另一種是組件集內組建屬性的切換，在組件屬性的選擇其中切換即可，例如按鈕內部的各種狀態切換。

結語

Figma 組件庫是一個強大的提效工具，也是設計系統中很重要的一部分。作為連接設計師和設計師、設計師和開發的橋梁，有了統一的標準后，輸出出的效率也會大大提高，對于團隊來說能很好的提升產品的品牌感和體驗。另外組件庫是需要跟隨產品不斷進化的，這就要求它是容易被維護的，需要梳理清楚它的使用者是誰，要把 Figma 組件庫當作一個設計團隊的產品來維護和升級，方便使用對象的查找、復用和理解。

由于時間和篇幅有限，關于 Figma 組件庫介紹中存在的疏誤之處還望大家給與指正，歡迎大家一起學習和討論。

參考文獻

• 《設計體系：數字產品設計的系統化方法》
• https://help.figma.com/hc/en-us/articles/5579474826519-Create-and-use-component-properties
• https://help.figma.com/hc/en-us/articles/4404856784663-Swap-style-and-component-libraries
• https://mp.weixin.qq.com/s/PoEk5vRRrquLOTOH3QZgIw

感謝閱讀，我是設計師波波 Bobby He，深耕 B 端體驗設計，持續學習輸出中，歡迎關注，期待與你鏈接～