設(shè)計(jì)提效——10 分鐘學(xué)會 Figma 組件庫的搭建和使用

為什么需要 Figma 組件庫

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

總之，一次性設(shè)計(jì)是使設(shè)計(jì)師淪為做圖機(jī)器的罪魁禍?zhǔn)住Ｈ绻覀兲崆按罱ê每蓮?fù)用的組件模板，就可以達(dá)到復(fù)用的目的，而且可以一鍵批量修改，從而解放生產(chǎn)力，把更多的時間精力投入到業(yè)務(wù)需求的深入思考中。

Figma 組件庫在設(shè)計(jì)體系中的定位

設(shè)計(jì)體系（Design System，也可以叫設(shè)計(jì)系統(tǒng)）是可復(fù)用組件的集合，由清晰的標(biāo)準(zhǔn)引導(dǎo)，通過機(jī)制化的組織流程和具象的指南與工具加以整合，以幫助開發(fā)者（設(shè)計(jì)、研發(fā)等）高效且一致地創(chuàng)建大量的應(yīng)用，并且動態(tài)地確保用戶體驗(yàn)的一致性。

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

Figma 團(tuán)隊(duì)做了一個專門以設(shè)計(jì)體系為題的網(wǎng)刊，域名為 designsystems.com。該網(wǎng)站有大量圍繞設(shè)計(jì)體系的文章、教程及代碼庫。

總的來講，F(xiàn)igma 組件庫是設(shè)計(jì)系統(tǒng)中的一部分，是沉淀設(shè)計(jì)規(guī)范的設(shè)計(jì)資產(chǎn)。作為連接設(shè)計(jì)師和設(shè)計(jì)師、設(shè)計(jì)師和開發(fā)的橋梁，組件庫首先應(yīng)該是靈活易用的；其次，組件庫是需要跟隨產(chǎn)品不斷進(jìn)化的，這就要求它是容易被維護(hù)的，否則它就會落后于產(chǎn)品迭代，直至逐漸被遺棄。

線上調(diào)用、實(shí)時同步

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

多人協(xié)作、共創(chuàng)共建

Figma 組件庫可以有多個設(shè)計(jì)師共同創(chuàng)建，大家只需要約束好相應(yīng)的組件層級嵌套規(guī)范，每個人可以負(fù)責(zé)自己所屬的模塊，分別更新、分別發(fā)布。

靈活拼裝、自由組合

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

原子設(shè)計(jì)理論

提到組件庫，不得不提到原子構(gòu)建理論。Atomic Design(原子設(shè)計(jì))是構(gòu)建Design System 的核心指導(dǎo)理論。化學(xué)中，所有的物體都是由原子構(gòu)成，原子組合構(gòu)成分子，分子組合構(gòu)成有機(jī)物，最終形成了宇宙萬物。

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

Foundation 全局基礎(chǔ)樣式

在設(shè)計(jì)系統(tǒng)中，基礎(chǔ)樣式可以理解為構(gòu)成設(shè)計(jì)稿最基礎(chǔ)的「原子」。如果你的設(shè)計(jì)稿中全部都使用共享樣式，當(dāng)后續(xù)需要調(diào)整時，只需要調(diào)整樣式庫即可，設(shè)計(jì)稿會跟著變化，而不需要一個個調(diào)整；樣式庫還可以通過 Design Token 來映射到前端代碼中，以提高最終開發(fā)的還原度。

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

顏色樣式（Color）

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

文本樣式（Text）

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

效果樣式（Effect）

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

布局柵格（Layout Grid）

橫向和縱向布局參考。可以通過柵格樣式來制定全局的尺寸和間距規(guī)范，尤其是用在響應(yīng)式網(wǎng)頁的設(shè)計(jì)當(dāng)中，可以通過柵格來做出一些適配效果。

創(chuàng)建樣式

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

這里以顏色為例，選中一個圖層，F(xiàn)ill 填充顏色之后，點(diǎn)擊右邊的四個點(diǎn)圖標(biāo)，在彈出的 Color Styles 顏色樣式面板中點(diǎn)擊加號，然后再填寫樣式的命名就能創(chuàng)建了。這里補(bǔ)充一下命名中使用斜杠“/”可以給樣式進(jìn)行分組。

批量創(chuàng)建樣式

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

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

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

樣式命名

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

• 按色調(diào)分類

• 按主題分類

• 按場景分類

樣式描述

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

組件類型

? 主組件（Main component）

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

◇ 實(shí)例組件（Instance）

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

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

• 圖層結(jié)構(gòu)不可以改動，也不可以刪除圖層，按刪除鍵不會刪除而是隱藏圖層；

• 內(nèi)部圖層尺寸不可以改，但是實(shí)例組件整體的尺寸可以更改。

• 實(shí)例的編輯可以逆向覆蓋。只要在實(shí)例替換面板中點(diǎn)選 Push overrides to main component，即可將當(dāng)前的實(shí)例屬性同步給母版及所有的實(shí)例。

組件嵌套

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

組件集（Variants）

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

屬性切換

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

創(chuàng)建組件集

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

組件集命名

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

屬性和值

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

組件調(diào)用

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

屬性值順序調(diào)整

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

組件屬性- Boolean Property

上述實(shí)例組件右側(cè)面板中的屬性選擇都是下拉菜單的形式，如果我們的組件是現(xiàn)實(shí)隱藏，例如圖標(biāo)左側(cè)是否帶圖標(biāo)，可以通過組件屬性的現(xiàn)實(shí)隱藏來實(shí)現(xiàn)。選中圖標(biāo)，點(diǎn)擊右側(cè)面板 Layer 右邊的箭頭，修改默認(rèn)值為 True 或 False。

后面在調(diào)用的時候，就能通過開關(guān)的形式來切換是否現(xiàn)實(shí)圖標(biāo)，同時組件集內(nèi)部的數(shù)量也并不會增加，可以節(jié)省內(nèi)存消耗。

組件集內(nèi)增加組件

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

組件集屬性沖突

假設(shè)我們要添加一個禁用狀態(tài)的主按鈕。點(diǎn)擊添加變體，此時虛線框中會復(fù)制出一個按鈕，我們把它的背景色修改。可以看到，選中變體組件集時在右側(cè)會出現(xiàn)屬性沖突的提示。因?yàn)檫@個新添加的變體組件屬性也會被復(fù)制過來，和已有的組件屬性一樣，就有了沖突。

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

組件集內(nèi)增加屬性名

當(dāng)需要增加屬性類型的維度時，可以點(diǎn)擊 Properties 右側(cè)的加號按鈕，創(chuàng)建新的 Variant，創(chuàng)建好之后相當(dāng)于多了一個新的屬性名，便可以將每個組件設(shè)置對應(yīng)屬性名的屬性值。

注意事項(xiàng)

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

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

• 切換變體的時候也相當(dāng)于替換組件，所以我們要確保一個變體組件集內(nèi)的各個組件結(jié)構(gòu)和命名一致，這樣在切換的時候已修改的屬性才會被保留；

• 

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

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

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

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

發(fā)布組件庫

1.Asset 點(diǎn)擊 Team library 按鈕（書本圖標(biāo)）；

2.Library 面板上，點(diǎn) Publish；

3.二次確認(rèn)面板，再次點(diǎn)擊 Publish 即可發(fā)布成功；

發(fā)布頻率

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

私有組件 Private components

當(dāng)組件庫中有一些臨時或者很少復(fù)用的組件，可以給這些臨時組件的命名前加上 _ 或者 .，也就是英文符號下劃線或點(diǎn)。在發(fā)布組件庫的時候，F(xiàn)igma 會自動隱藏這些私有組件，這樣你在構(gòu)建組件庫的時候可以遵循原子化方法，同時發(fā)布出去給其他設(shè)計(jì)師使用的組件庫也很簡潔，不會有一些臨時組件。

復(fù)用組件庫

創(chuàng)完了組件庫，團(tuán)隊(duì)成員的復(fù)用步驟如下：在Tteam library 開啟想生效的組件庫，開啟后在 Assets 中就可以找到組件庫對應(yīng)的組件然后復(fù)用，可以通過分組形勢查找，也可以通過關(guān)鍵詞模糊搜索。

更新組件庫

組件庫也可以理解成是設(shè)計(jì)團(tuán)隊(duì)的一個小的產(chǎn)品，也是需要不斷更新迭代的，當(dāng)我們的組件庫有更新內(nèi)容的時候，可以和發(fā)布組件時進(jìn)行同樣的操作，點(diǎn)擊 Assets 面板中的 Team Library 按鈕，就能將在組件庫中修改的內(nèi)容發(fā)布更新至云端。

同步云端組件庫

當(dāng)原組件庫發(fā)生變化，F(xiàn)igma 右下方回彈出一個提示框，點(diǎn)擊 Review 進(jìn)行查看，可以預(yù)覽所有在本文件中用到的組件庫中的組件的更新的情況，確認(rèn)之后點(diǎn)擊更新，即可將變化同步到所有用到此組件庫的文件。通過這種更新同步組件庫的方式，便能夠達(dá)到一鍵修改，全劇替換的便捷操作。

復(fù)制組件的注意事項(xiàng)

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

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

組件的替換

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

Figma 組件庫是一個強(qiáng)大的提效工具，也是設(shè)計(jì)系統(tǒng)中很重要的一部分。作為連接設(shè)計(jì)師和設(shè)計(jì)師、設(shè)計(jì)師和開發(fā)的橋梁，有了統(tǒng)一的標(biāo)準(zhǔn)后，輸出出的效率也會大大提高，對于團(tuán)隊(duì)來說能很好的提升產(chǎn)品的品牌感和體驗(yàn)。另外組件庫是需要跟隨產(chǎn)品不斷進(jìn)化的，這就要求它是容易被維護(hù)的，需要梳理清楚它的使用者是誰，要把 Figma 組件庫當(dāng)作一個設(shè)計(jì)團(tuán)隊(duì)的產(chǎn)品來維護(hù)和升級，方便使用對象的查找、復(fù)用和理解。

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

我是設(shè)計(jì)師波波 Bobby He，深耕 B端體驗(yàn)設(shè)計(jì)，持續(xù)學(xué)習(xí)輸出中，歡迎大家關(guān)注。

如果大家想及時收到文章的更新麻煩大家多給我們文章點(diǎn)一下?“ 在看 ”?和“ 贊 ”?，并在右上角“ ... ”?里面將【波波設(shè)計(jì)室】設(shè)為星標(biāo)，這樣就不會做過每一篇精彩的推送啦??，也歡迎大家在公眾號后臺添加我的微信進(jìn)行交流～