10分鐘學(xué)會Figma組件庫的搭建和使用

一、背景

1.為什么需要Figma組件庫

當(dāng)我們在做設(shè)計稿的時候，例如做一個按鈕，如果沒有做成可復(fù)用的組

件，那后面在其他模塊要用到按鈕的地方可能又需要重新畫，會有很多

的重復(fù)勞動。又或是另一種場景，我們需要把按鈕的尺寸或顏色統(tǒng)一調(diào)

整，可能需要一個一個去改，很容易改錯或者疏忽。

總之，一次性設(shè)計是使設(shè)計師淪為做圖機器的罪魁禍?zhǔn)?。如果我們提?/p>

搭建好可復(fù)用的組件模板，就可以達到復(fù)用的目的，而且可以一鍵批量

修改，從而解放生產(chǎn)力，把更多的時間精力投入到業(yè)務(wù)需求的深入思考

中。

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

設(shè)計體系（DesignSystem，也可以叫設(shè)計系統(tǒng)混可復(fù)用組件的集合，

由清晰的標(biāo)準(zhǔn)引導(dǎo)，通過機制化的組織流程和具象的指南與工具加以整

合，以幫助開發(fā)者（設(shè)計、研發(fā)等）高效且一致地創(chuàng)建大量的應(yīng)用，并

且動態(tài)地確保用戶體驗的一致性。

需要指出的是，設(shè)計體系不只是組件庫，不只是樣式指南。當(dāng)你瀏覽上

面這些案例內(nèi)容的時候，你固然會看到組件庫和樣式指南，但更值得關(guān)

注的是它們陳述的設(shè)計目的、設(shè)計理念、設(shè)計原則、設(shè)計模式、設(shè)計與

工程同步的方法等等。

Figma團隊做了一個專門以設(shè)計體系為題的網(wǎng)刊，域名為

。該網(wǎng)站有大量圍繞設(shè)計體系的文章、教程及代

碼庫。

總的來講，F(xiàn)igma組件庫是設(shè)計系統(tǒng)中的一部分，是沉淀設(shè)計規(guī)范的

設(shè)計資產(chǎn)。作為連接設(shè)計師和設(shè)計師、設(shè)計師和開發(fā)的橋梁，組件庫首

先應(yīng)該是靈活易用的；其次，組件庫是需要跟隨產(chǎn)品不斷進化的，這就

要求它是容易被維護的，否則它就會落后于產(chǎn)品迭代，直至逐漸被遺棄。

Figma組件庫在設(shè)計體:

Figma

二.Figma組件庫如何助力設(shè)計提效

1.線上調(diào)用、實時同步

跨團隊使用組件庫（樣式、組件）、實時更新、組件庫的主題顏色一鍵切

換、組件可以增加提示語等功能，所有的調(diào)用方式都是線上的，不需要

任何本地文件的傳輸。如果組件庫有更新，只需要Review之后

Update即可實時同步。

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

Figma組件庫可以有多個設(shè)計師共同創(chuàng)建,大家只需要約束好相應(yīng)的

組件層級嵌套規(guī)范，每個人可以負(fù)責(zé)自己所屬的模塊，分別更新、分別

發(fā)布。

3.靈活拼裝.自由組合

Figma組件庫有非常高的自定義拼裝能力，不解除組件的基礎(chǔ)上也能

夠改變一些顏色、圓角、布局間距等。對于一些特殊的業(yè)務(wù)場景，也能

將基礎(chǔ)組件拆分開進行組合。

Figma組件庫如何助力］

線上調(diào)用

實時同步

三、Figma組件庫搭建經(jīng)驗分享

1.原子設(shè)計理論

提到組件庫,不得不提到原子構(gòu)建理論。AtomicDesign（原子設(shè)計）是

構(gòu)建DesignSystem的核心指導(dǎo)理論?；瘜W(xué)中，所有的物體都是由原

子構(gòu)成，原子組合構(gòu)成分子，分子組合構(gòu)成有機物，最終形成了宇宙萬

物。

2013年BradForst將此理論運用在界面設(shè)計中，形成一套設(shè)計系統(tǒng),

包含5個層面：原子、分子、組織、模板、頁面。那么對應(yīng)設(shè)計系統(tǒng)來

說，我們的顏色、字體、圖標(biāo)以及按鈕、標(biāo)簽等都會對應(yīng)到相應(yīng)的原子

和分子，通過組件之間的搭配組合，最終構(gòu)成頁面。

原子設(shè)計理論

原子分子

AtomsMolecules

顏色按鈕

文本導(dǎo)航欄

形狀標(biāo)簽欄

樣式

2.Foundation全局基礎(chǔ)樣式

在設(shè)計系統(tǒng)中，基礎(chǔ)樣式可以理解為構(gòu)成設(shè)計稿最基礎(chǔ)的「原子」c如

果你的設(shè)計稿中全部都使用共享樣式，當(dāng)后續(xù)需要調(diào)整時，只需要調(diào)整

樣式庫即可，設(shè)計稿會跟著變化，而不需要一個個調(diào)整；樣式庫還可以

通過DesignToken來映射到前端代碼中，以提高最終開發(fā)的還原度。

Foundation全局基礎(chǔ)樣

Aorco<Mgn

Fonts

s“

AWrM.*06*VS?>?.B

inmw?jxUtW-A

*?rWTW-*^-e

■5???，

務(wù)”的，■工次—3??

務(wù)實的逑：?主義■,

務(wù)實的浪漫主義修《?*0?

務(wù)實的浪漫主義-■*MlC

務(wù)實的浪漫主義?MB?

06■???rvw

?W*-wwrt2，

?*MB。S6MWW?，e'r

■?O??Ma0^■?G

密交的裝■芟義aimw,一.

弟實的強震主義-Mb*?ao<

務(wù)實的浪漫主義*6—■???wt

務(wù)實的浪漫主義*CM"■.

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

1）顏色樣式（Color）

顏色樣式可以用于填充顏色、描邊顏色、文字顏色。是頁面整體風(fēng)格表

現(xiàn)的重要基本元素，它可以建立品牌的識別性，梳理頁面的視覺層級關(guān)

系，突出內(nèi)容并平衡其他視覺元素。建議大家可以按照功能和屬性將顏

色進行分組命名,比如，比如品牌色、成功色、警告色等，并將默認(rèn)、

懸浮、點擊、禁用等顏色放在一組，方便團隊其他設(shè)計師使用。

顏色樣式(Color)

Brand品牌

Brandl-Light

Brand2-Focus

Brand3-Disabled

?Brand7-Hover

?Brand8-Normal

Brand9-Click

2)文本樣式(Text)

文本樣式中包括：字號、字重、行高和字距等。需要注意的是不要單純

的將名稱命名為TLT2等純符號性的名稱，可以在后面加上適當(dāng)?shù)恼Z

義化描述，比如一級標(biāo)題、常規(guī)正文等文案，同時也可以在描述里添加

對應(yīng)的使用說明，這樣當(dāng)鼠標(biāo)懸浮在這個樣式上，會給用戶帶來提示性

的預(yù)覽。這種辦法同樣適用于顏色、陰影等全局樣式，會更加方便大家

調(diào)用且能夠很好的解除新用戶的使用疑慮。

文本樣式(Text)

TypographyStyles

加粗常規(guī)

一級文字/加粗/36px/行高44Px一級文工

二級文字/加粗/20px/行高28Px二級文字/常大

三鍛文字/加lfi/16px/行高24Px三圾文字/常規(guī)八

四線文字/MIB/Mpx/行高22mE3t?XT/K?/Up

五.文字/g"2p"l?iC20p>

3）效果樣式（Effect）

效果樣式包括：外陰影、內(nèi)陰影、模糊、背景模糊等。陰影值應(yīng)該遵循

現(xiàn)實物理世界中物體的特性。因此在陰影的設(shè)定上采用了三層陰影的表

達方式，讓陰影更加柔和，更符合真實光源下的物體狀態(tài)。物體的高度

直接影響陰影，離地面越高陰影越大，模糊值越高，反之相反。

效果樣式(Effect)

Shadow

Shadow

基礎(chǔ)投影

描述：組件hover狀態(tài)使用，例如表格和樹花

Token：@td-shadow-1

box-shadow:01px10pxrgbatO,0,0,5%),

中層投影

描述：下拉組件使用，例如下拉菜單/氣泡殖

Token:@td-shadow-2

box-shadow:03px14px2pxrgba(0,0.0.

上層投影

描述：警示或彈窗組件使用，例如全局提示/

Token:@td-shadow-3

box-shadow:06px30px5pxrgba(0,0,0,

4)布局柵格(LayoutGrid)

橫向和縱向布局參考?？梢酝ㄟ^柵格樣式來制定全局的尺寸和間距規(guī)范,

尤其是用在響應(yīng)式網(wǎng)頁的設(shè)計當(dāng)中，可以通過柵格來做出一些適配效果。

布局柵格（LayoutGrid

3.創(chuàng)建樣式

在Figma中創(chuàng)建四種樣式（顏色Color,文本Text、效果Effects.

柵格LayoutGrid）的操作類似。

這里以顏色為例，選中一個圖層，印1填充顏色之后，點擊右邊的四個

點圖標(biāo)，在彈出的ColorStyles顏色樣式面板中點擊加號，然后再填

寫樣式的命名就能創(chuàng)建了。這里補充一下命名中使用斜杠7〃可以給

樣式進行分組。

創(chuàng)建樣式

1）批量創(chuàng)建樣式

如果想一次性創(chuàng)建多個顏色樣式，可以將所有的顏色通過矩形平鋪出來

之后，按下快捷鍵Cmd+R,來批量更改好圖層命名。

批量創(chuàng)建樣式

LayersAssetsFigma組件庫的搭建和使用

Pages+

cover

,Figma組件庫的搭建和使用

oblue/01

。blue/02

oblue/03

obLue/04

oblue/05

oblue/06

oblue/07

oblue/08

ablue/09

ared/01

ared/02

ared/03

然后再通過插件FStyler-GenerateStyles］就能一鍵批量創(chuàng)建樣式,

解放雙手。

批量創(chuàng)建樣式

red/06

red/07

red/08

red/09

ablue/01

ablue/02

ablue/03

ablue/04

oblue/05

oblue/06

oblue/07

ablue/08

ablue/09

yellow/01

yellow/02

yellow/03

yellow/04

yellow/05

yellow/06

yellow/07

yellow/08

yellow/09

green/01

green/02

green/03

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

理。

2）樣式命名

樣式命名對于共享樣式庫的顯示順序十分重要，你可以通過斜線分隔命

名的方式來給它們歸類。比如說你可以設(shè)置一系列的警告顏色，都以

error/開頭，再設(shè)置一組排版文字的顏色,都以Text/開頭,這樣它

們就會被自動歸類，方便你在使用時查找。一般有以下幾種分類依據(jù):

?按色調(diào)分類

?按主題分類

?按場景分類

樣式命名

3）樣式描述

給樣式添加描述和給組件添加描述作用一致，描述信息可以幫助你判斷

哪里該用哪種樣式，保持團隊風(fēng)格統(tǒng)一。另外補充一下，描述也是可以

被檢索到的，例如可以嘗試名稱用英文和前端對齊，描述用中文方便英

文不好的同時協(xié)作。

樣式描述

Edit!

|prim;

淺色/

Prop

4.組件類型

1)主組件(Maincomponent)

在左邊圖層列表內(nèi)顯示為紫色的，圖標(biāo)為四個菱形組成的圖形。它作為

主組件，它的變化會實時同步到它所有的實例組件中，有時也稱之為父

組件。

2)實例組件(Instance)

對著主組件接著按下c^dp復(fù)制的元素,它們在左側(cè)圖層列表內(nèi)顯示

為紫色的空心菱形。它們作為主組件的引用，會自動同步主組件的各個

屬性變動。一個主組件可以有多個實例組件，有時我們也稱其為子組件。

實例組件有以下特點：

?可以修改很多屬性，比如背景色、文字內(nèi)容、布局間距等，修改

的屬性不會再跟著主組件同步；

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

是隱藏圖層；

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

■實例的編輯可以逆向覆蓋。只要在實例替換面板中點選Push

overridestomaincomponent,即可將當(dāng)前的實例屬性同步給

母版及所有的實例。

組件類型

#Button

口

組，

ButtonText

Frame

非組件

5.組件嵌套

組件的嵌套，類似原子理論中「分子組合成組織」的過程。它所對應(yīng)的

元素往往是一些較為復(fù)雜的控件、卡片等。比如我們上面做的按鈕組件,

將它的實例結(jié)合圖標(biāo)、文案編為一個結(jié)果頁Frame,再將Frame組

件化即可完成一個組件的嵌套。

組件嵌套

?Button

ButtonText

6.組件集（Variants）

當(dāng)我們有很多相近的組件時，可以把它們做成一個組件集（也稱變體）。

這樣在引用時就不用從一堆相似組件中尋找了，只需要切換不同的多組

件屬性即可。例如按鈕可以按照類型（Type）和狀態(tài)（State）共四種。

組件集

Pr

DefaultButt

HoverButt

1）屬性切換

那么，我們就可以把它創(chuàng)建為一個有兩個維度屬性的變體，此時可以通

過組合Type和State屬性來切換四種狀態(tài)。其中Type和State

稱為屬性名，后面的選項（比如Default.Hover）稱為屬性值。

屬性切換

Button

Button

Button

2）創(chuàng)建組件集

創(chuàng)建組件集有兩種方式。一是選中多個主組件，在右側(cè)就會出現(xiàn)組合為

變體組件集（Combineasvariants）選項，點擊之后這些主組件就會

被一個組件集（紫色虛線的Frame）裝起來，在組件調(diào)用面板也變成

了一個組件；二是選中沒有做成組件對普通圖層，點擊上方的Create

componentset也能創(chuàng)建組件集。默認(rèn)會調(diào)用左上第一個屬性的組件。

創(chuàng)建組件集

I*Button/hover/Primary。Button/hoverVDangerous

ButtonTextButtonTexl

1056.67x330.08

3）組件集命名

創(chuàng)建組件集的時候Figma會自動根據(jù)組件名稱中斜線（/）分割的值

來生成屬性列表，所以在創(chuàng)建之前推薦先按照一定規(guī)則命名。如下圖,

我們按照BiAtto^/TLjpe/state的格式給每個按鈕命名，F(xiàn)igma會自動提

取出所有可能的屬性，生成右側(cè)的屬性值列表。

組件命名

。Button/default/Primary

ButtonText

*Button/hover/Primary

ButtonText

4）屬性和值

按照上圖命名的四個按鈕組合為變體組件集之后，在右側(cè)會顯示自動分

好類的屬性值，不過我們還需要手動更改一下屬性名，也就是把

Property1改為State，把Property2改為Type。

屬性和值

?Button

ButtonText

ButtonText

5）組件調(diào)用

此時按下shift+i打開組件調(diào)用面板，可以看到四個按鈕組件在這里只顯

示為一個按鈕。拖拽一個實例組件到畫布中，我們就可以在右邊通過選

擇屬性來切換不同的按鈕變體了。

組件調(diào)用

口+

ODao

ComponentsPluginsWidgets

QbuttonX

Localcomponents

ButtonText

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

這里右側(cè)的屬性名和屬性值的顯示JII頁序可以在變體組件集的面板中調(diào)

整。從組件調(diào)用面板拖拽出來的實例組件，各項屬性值都默認(rèn)選第一個,

所以我們一般會把使用頻率比較大的屬性值排在第一位。

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

Primal

口

DefaultButton

HoverButton

□

7）組件屬性-BooleanProperty

上述實例組件右側(cè)面板中的屬性選擇都是下拉菜單的形式，如果我們的

組件是現(xiàn)實隱藏，例如圖標(biāo)左側(cè)是否帶圖標(biāo)，可以通過組件屬性的現(xiàn)實

隱藏來實現(xiàn)。選中圖標(biāo)，點擊右側(cè)面板Layer右邊的箭頭，修改默認(rèn)

值為True或Falseo

組件屬性-BooleanPre

■+'■But

60.96x60.96

Createcomponentprop(

Name

ValueI

后面在調(diào)用的時候，就能通過開關(guān)的形式來切換是否現(xiàn)實圖標(biāo)，同時組

件集內(nèi)部的數(shù)量也并不會增加，可以節(jié)省內(nèi)存消耗。

組件屬性-BooleanPre

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

我們可以直接在變體組件集里面添加新的組件，選中變體組件集之后在

右下角出現(xiàn)一個紫色的加號，點擊它可以添加變體組件。

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

Buttor

Buttor

9）組件集屬性沖突

假設(shè)我們要添加一個禁用狀態(tài)的主按鈕。點擊添加變體，此時虛線框中

會復(fù)制出一個按鈕，我們把它的背景色修改?？梢钥吹剑x中變體組件

集時在右側(cè)會出現(xiàn)屬性沖突的提示。因為這個新添加的變體組件屬性也

會被復(fù)制過來，和已有的組件屬性一樣，就有了沖突。

組件集屬性沖突

ButtonText

ButtonText

ButtonText

這里發(fā)生沖突的是它的State屬性，它也是Default,我們把它更改

為Disable,屬性沖突的提示就消失了。

組件集屬性沖突

ButtonText

ButtonText

ButtonText

HugxHug

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

當(dāng)需要增加屬性類型的維度時，可以點擊Properties右側(cè)的加號按鈕,

創(chuàng)建新的Variantz創(chuàng)建好之后相當(dāng)于多了一個新的屬性名，便可以將

每個組件設(shè)置對應(yīng)屬性名的屬性值。

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

ButtonText

ButtonText

11）注意事項

變體可以幫我們避免大海撈針式的選擇，將組件切換簡化為少量屬性組

合，但是在創(chuàng)建和使用變體時養(yǎng)成一些好的習(xí)慣可以幫我們更好的利用

它。

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

件的不同狀態(tài)組合為變體；

?切換變體的時候也相當(dāng)于替換組件，所以我們要確保一個變體組

件集內(nèi)的各個組件結(jié)構(gòu)和命名一致，這樣在切換的時候已修改的

屬性才會被保留；

命名案例

rectangle

PrimarySecondaryC

Default

ButtonTextButtonTextButte

1

1

Hover

1

1ButtonTextButtonTextButte

Medium

Press1

1ButtonTextButtonTextButte

1

1

1

ButtonText;Butte

Active,

1

1

1

Disable?ButtonText

1

1

1

1

DefaultButtonTextButtonTextButt

1

1

Hover

1RuttonTftxtRiittonTextRiitt

1

Large|

Press1ButtonTextButtonTextButt

1

1

1

14

ButtonTextButtonText;Butt

Active

1

1

1

1

Disable?ButtonText

1

1

1

1

1ButtonText1ButtonTextButte

?如果需要解除變體組件集，可以直接將組件從虛線框內(nèi)拖拽出來,

全部拖拽出來這個組件集虛線框就會消失;

?組件集也是一個Frame,不過是一個特殊的Frame,這個紫色

虛線框是可以修改的，你還可以給它添加自動布局屬性來自動排

布里面的組件變體；

?使用Config2022更新的組件屬性中的新功能，例如Boolean

Property.SwapInstanceProperty,可以一定程度上減少組建

集內(nèi)部的組彳物量，避免巨型變體組件集，如果一個變體組件集

內(nèi)有幾千個組件，可能會消耗大量內(nèi)存，導(dǎo)致操作Figma卡頓。

組件屬性

BooleanProperty

顯7F屬性

四、Figma組件庫的發(fā)布、更新和使用

組件庫制定的意義，就是讓團隊每一位成員都能用到最新的組件,提升

效率、保證一致輸出。那么接下來就講一下如何在Figma中發(fā)布、更

新和適用組件庫

1.發(fā)布組件庫

1.Asset點擊Teamlibrary按鈕（書本圖標(biāo)）;

2.Library面板上，點Publish;

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

發(fā)布組件庫

LayersAssetsPage1

LibrariesUpdates

QSearch

QSeari.

Localcomponents

UsedinthisfileCurrentfile

組件庫test

Truelore

Trteamlibrary

1）發(fā)布頻率

當(dāng)組件庫發(fā)生變動，維護者發(fā)布后使用者在文件中會收到通知，來決定

是否同步更新到設(shè)計稿。如果維護者頻繁發(fā)布，使用者也會頻繁收到通

知，所以最好將更新發(fā)布固定在一定頻率，比如每天下午六點發(fā)布一次，

這樣使用者只需要每天早上更新一次就可以了。

2）私有組件Privatecomponents

當(dāng)組件庫中有一些臨時或者很少復(fù)用的組件，可以給這些臨時組件的命

名前加上.或者.，也就是英文符號下劃線或點。在發(fā)布組件庫的時

候，F(xiàn)igma會自動隱藏這些私有組件，這樣你在構(gòu)建組件庫的時候可

以遵循原子化方法，同時發(fā)布出去給其他設(shè)計師使用的組件庫也很筒潔,

不會有一些臨時組件。

私有組件Privatecomp

?checkbox

QCheckboxQCheckb

CheckboxCheckb

?.cascader

Pleaseselect

China/Beijing/Chaoyang

2.復(fù)用組件庫

創(chuàng)完了組件庫，團隊成員的復(fù)用步驟如下：在Tteamlibrary開啟想生

效的組件庫，開啟后在Assets中就可以找到組件庫對應(yīng)的組件然后復(fù)

用，可以通過分組形勢查找，也可以通過關(guān)鍵詞模糊搜索。

復(fù)用組件庫

LayersAssets*

三十分鐘搞定FlgmaLibrariesUpdates

QSc-；：ha?

Q

Localcomponents

Currentfile

Usedinthisfile