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

1、10 分鐘學(xué)會(huì) Figma 組件庫的搭建和使用一、背景1. 為什么需要 Figma 組件庫當(dāng)我們?cè)谧鲈O(shè)計(jì)稿的時(shí)候，例如做一個(gè)按鈕，如果沒有做成可復(fù)用的組件，那后面在其他模塊要用到按鈕的地方可能又需要重新畫，會(huì)有很多的重復(fù)勞動(dòng)。又或是另一種場景，我們需要把按鈕的尺寸或顏色統(tǒng)一調(diào)整，可能需要一個(gè)一個(gè)去改，很容易改錯(cuò)或者疏忽。總之，一次性設(shè)計(jì)是使設(shè)計(jì)師淪為做圖機(jī)器的罪魁禍?zhǔn)?。如果我們提前搭建好可?fù)用的組件模板，就可以達(dá)到復(fù)用的目的，而且可以一鍵批量修改，從而解放生產(chǎn)力，把更多的時(shí)間精力投入到業(yè)務(wù)需求的深入思考中。2. Figma 組件庫在設(shè)計(jì)體系中的定位設(shè)計(jì)體系（Design System，也可以叫

2、設(shè)計(jì)系統(tǒng)）是可復(fù)用組件的集合，由清晰的標(biāo)準(zhǔn)引導(dǎo)，通過機(jī)制化的組織流程和具象的指南與工具加以整合，以幫助開發(fā)者（設(shè)計(jì)、研發(fā)等）高效且一致地創(chuàng)建大量的應(yīng)用，并且動(dòng)態(tài)地確保用戶體驗(yàn)的一致性。需要指出的是，設(shè)計(jì)體系不只是組件庫，不只是樣式指南。當(dāng)你瀏覽上面這些案例內(nèi)容的時(shí)候，你固然會(huì)看到組件庫和樣式指南，但更值得關(guān)注的是它們陳述的設(shè)計(jì)目的、設(shè)計(jì)理念、設(shè)計(jì)原則、設(shè)計(jì)模式、設(shè)計(jì)與工程同步的方法等等。Figma 團(tuán)隊(duì)做了一個(gè)專門以設(shè)計(jì)體系為題的網(wǎng)刊，域名為 。該網(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ì)

3、師和開發(fā)的橋梁，組件庫首先應(yīng)該是靈活易用的；其次，組件庫是需要跟隨產(chǎn)品不斷進(jìn)化的，這就要求它是容易被維護(hù)的，否則它就會(huì)落后于產(chǎn)品迭代，直至逐漸被遺棄。二、Figma 組件庫如何助力設(shè)計(jì)提效1. 線上調(diào)用、實(shí)時(shí)同步跨團(tuán)隊(duì)使用組件庫(樣式、組件)、實(shí)時(shí)更新、組件庫的主題顏色一鍵切換、組件可以增加提示語等功能，所有的調(diào)用方式都是線上的，不需要任何本地文件的傳輸。如果組件庫有更新，只需要 Review 之后 Update 即可實(shí)時(shí)同步。2. 多人協(xié)作、共創(chuàng)共建Figma 組件庫可以有多個(gè)設(shè)計(jì)師共同創(chuàng)建，大家只需要約束好相應(yīng)的組件層級(jí)嵌套規(guī)范，每個(gè)人可以負(fù)責(zé)自己所屬的模塊，分別更新、分別發(fā)布。3. 靈活

4、拼裝、自由組合Figma 組件庫有非常高的自定義拼裝能力，不解除組件的基礎(chǔ)上也能夠改變一些顏色、圓角、布局間距等。對(duì)于一些特殊的業(yè)務(wù)場景，也能將基礎(chǔ)組件拆分開進(jìn)行組合。三、Figma 組件庫搭建經(jīng)驗(yàn)分享1. 原子設(shè)計(jì)理論提到組件庫，不得不提到原子構(gòu)建理論。Atomic Design(原子設(shè)計(jì))是構(gòu)建Design System 的核心指導(dǎo)理論?；瘜W(xué)中，所有的物體都是由原子構(gòu)成，原子組合構(gòu)成分子，分子組合構(gòu)成有機(jī)物，最終形成了宇宙萬物。2013年 Brad Forst 將此理論運(yùn)用在界面設(shè)計(jì)中，形成一套設(shè)計(jì)系統(tǒng)，包含5個(gè)層面：原子、分子、組織、模板、頁面。那么對(duì)應(yīng)設(shè)計(jì)系統(tǒng)來說，我們的顏色、字體、圖

5、標(biāo)以及按鈕、標(biāo)簽等都會(huì)對(duì)應(yīng)到相應(yīng)的原子和分子，通過組件之間的搭配組合，最終構(gòu)成頁面。2. Foundation 全局基礎(chǔ)樣式在設(shè)計(jì)系統(tǒng)中，基礎(chǔ)樣式可以理解為構(gòu)成設(shè)計(jì)稿最基礎(chǔ)的原子。如果你的設(shè)計(jì)稿中全部都使用共享樣式，當(dāng)后續(xù)需要調(diào)整時(shí)，只需要調(diào)整樣式庫即可，設(shè)計(jì)稿會(huì)跟著變化，而不需要一個(gè)個(gè)調(diào)整；樣式庫還可以通過 Design Token 來映射到前端代碼中，以提高最終開發(fā)的還原度。樣式是 Figma 中的一些可以復(fù)用的模式，目前支持四種：1）顏色樣式（Color）顏色樣式可以用于填充顏色、描邊顏色、文字顏色。是頁面整體風(fēng)格表現(xiàn)的重要基本元素，它可以建立品牌的識(shí)別性，梳理頁面的視覺層級(jí)關(guān)系，突出內(nèi)

6、容并平衡其他視覺元素。建議大家可以按照功能和屬性將顏色進(jìn)行分組命名，比如，比如品牌色、成功色、警告色等，并將默認(rèn)、懸浮、點(diǎn)擊、禁用等顏色放在一組，方便團(tuán)隊(duì)其他設(shè)計(jì)師使用。2）文本樣式（Text）文本樣式中包括：字號(hào)、字重、行高和字距等。需要注意的是不要單純的將名稱命名為T1、T2等純符號(hào)性的名稱，可以在后面加上適當(dāng)?shù)恼Z義化描述，比如一級(jí)標(biāo)題、常規(guī)正文等文案，同時(shí)也可以在描述里添加對(duì)應(yīng)的使用說明，這樣當(dāng)鼠標(biāo)懸浮在這個(gè)樣式上，會(huì)給用戶帶來提示性的預(yù)覽。這種辦法同樣適用于顏色、陰影等全局樣式，會(huì)更加方便大家調(diào)用且能夠很好的解除新用戶的使用疑慮。3）效果樣式（Effect）效果樣式包括：外陰影、內(nèi)陰影

7、、模糊、背景模糊等。陰影值應(yīng)該遵循現(xiàn)實(shí)物理世界中物體的特性。因此在陰影的設(shè)定上采用了三層陰影的表達(dá)方式，讓陰影更加柔和，更符合真實(shí)光源下的物體狀態(tài)。物體的高度直接影響陰影，離地面越高陰影越大，模糊值越高，反之相反。4）布局柵格（Layout Grid）橫向和縱向布局參考?？梢酝ㄟ^柵格樣式來制定全局的尺寸和間距規(guī)范，尤其是用在響應(yīng)式網(wǎng)頁的設(shè)計(jì)當(dāng)中，可以通過柵格來做出一些適配效果。3. 創(chuàng)建樣式在 Figma 中創(chuàng)建四種樣式（顏色 Color、文本 Text、效果 Effects、柵格 Layout Grid）的操作類似。這里以顏色為例，選中一個(gè)圖層，F(xiàn)ill 填充顏色之后，點(diǎn)擊右邊的四個(gè)點(diǎn)圖標(biāo)，

8、在彈出的 Color Styles 顏色樣式面板中點(diǎn)擊加號(hào)，然后再填寫樣式的命名就能創(chuàng)建了。這里補(bǔ)充一下命名中使用斜杠“/”可以給樣式進(jìn)行分組。1）批量創(chuàng)建樣式如果想一次性創(chuàng)建多個(gè)顏色樣式，可以將所有的顏色通過矩形平鋪出來之后，按下快捷鍵 Cmd+R，來批量更改好圖層命名。然后再通過插件Styler-Generate Styles就能一鍵批量創(chuàng)建樣式，解放雙手。以上是以顏色樣式距離，其他的文字樣式、效果樣式的創(chuàng)建方法也是同理。2）樣式命名樣式命名對(duì)于共享樣式庫的顯示順序十分重要，你可以通過斜線分隔命名的方式來給它們歸類。比如說你可以設(shè)置一系列的警告顏色，都以 error/ 開頭，再設(shè)置一組排版

9、文字的顏色，都以 Text/ 開頭，這樣它們就會(huì)被自動(dòng)歸類，方便你在使用時(shí)查找。一般有以下幾種分類依據(jù)：按色調(diào)分類按主題分類按場景分類3）樣式描述給樣式添加描述和給組件添加描述作用一致，描述信息可以幫助你判斷哪里該用哪種樣式，保持團(tuán)隊(duì)風(fēng)格統(tǒng)一。另外補(bǔ)充一下，描述也是可以被檢索到的，例如可以嘗試名稱用英文和前端對(duì)齊，描述用中文方便英文不好的同時(shí)協(xié)作。4. 組件類型1）主組件（Main component）在左邊圖層列表內(nèi)顯示為紫色的，圖標(biāo)為四個(gè)菱形組成的圖形。它作為主組件，它的變化會(huì)實(shí)時(shí)同步到它所有的實(shí)例組件中，有時(shí)也稱之為父組件。2）實(shí)例組件（Instance）對(duì)著主組件接著按下Cmd D復(fù)制

10、的元素，它們?cè)谧髠?cè)圖層列表內(nèi)顯示為紫色的空心菱形。它們作為主組件的引用，會(huì)自動(dòng)同步主組件的各個(gè)屬性變動(dòng)。一個(gè)主組件可以有多個(gè)實(shí)例組件，有時(shí)我們也稱其為子組件。實(shí)例組件有以下特點(diǎn)：可以修改很多屬性，比如背景色、文字內(nèi)容、布局間距等，修改的屬性不會(huì)再跟著主組件同步；圖層結(jié)構(gòu)不可以改動(dòng)，也不可以刪除圖層，按刪除鍵不會(huì)刪除而是隱藏圖層；內(nèi)部圖層尺寸不可以改，但是實(shí)例組件整體的尺寸可以更改。實(shí)例的編輯可以逆向覆蓋。只要在實(shí)例替換面板中點(diǎn)選 Push overrides to main component，即可將當(dāng)前的實(shí)例屬性同步給母版及所有的實(shí)例。5. 組件嵌套組件的嵌套，類似原子理論中分子組合成組織的

11、過程。它所對(duì)應(yīng)的元素往往是一些較為復(fù)雜的控件、卡片等。比如我們上面做的按鈕組件，將它的實(shí)例結(jié)合圖標(biāo)、文案編為一個(gè)結(jié)果頁 Frame，再將 Frame 組件化即可完成一個(gè)組件的嵌套。6. 組件集（Variants）當(dāng)我們有很多相近的組件時(shí)，可以把它們做成一個(gè)組件集（也稱變體）。這樣在引用時(shí)就不用從一堆相似組件中尋找了，只需要切換不同的多組件屬性即可。例如按鈕可以按照類型（Type）和狀態(tài)（State）共四種。1）屬性切換那么，我們就可以把它創(chuàng)建為一個(gè)有兩個(gè)維度屬性的變體，此時(shí)可以通過組合 Type 和 State 屬性來切換四種狀態(tài)。其中 Type 和 State 稱為屬性名，后面的選項(xiàng)（比如

12、Default、Hover）稱為屬性值。2）創(chuàng)建組件集創(chuàng)建組件集有兩種方式。一是選中多個(gè)主組件，在右側(cè)就會(huì)出現(xiàn)組合為變體組件集（Combine as variants）選項(xiàng)，點(diǎn)擊之后這些主組件就會(huì)被一個(gè)組件集（紫色虛線的 Frame）裝起來，在組件調(diào)用面板也變成了一個(gè)組件；二是選中沒有做成組件對(duì)普通圖層，點(diǎn)擊上方的 Create component set也能創(chuàng)建組件集。默認(rèn)會(huì)調(diào)用左上第一個(gè)屬性的組件。3）組件集命名創(chuàng)建組件集的時(shí)候 Figma 會(huì)自動(dòng)根據(jù)組件名稱中斜線（/）分割的值來生成屬性列表，所以在創(chuàng)建之前推薦先按照一定規(guī)則命名。如下圖，我們按照Button/Type/State的格式給

13、每個(gè)按鈕命名，F(xiàn)igma 會(huì)自動(dòng)提取出所有可能的屬性，生成右側(cè)的屬性值列表。4）屬性和值按照上圖命名的四個(gè)按鈕組合為變體組件集之后，在右側(cè)會(huì)顯示自動(dòng)分好類的屬性值，不過我們還需要手動(dòng)更改一下屬性名，也就是把 Property 1 改為 State，把 Property 2 改為 Type。5）組件調(diào)用此時(shí)按下Shift+I打開組件調(diào)用面板，可以看到四個(gè)按鈕組件在這里只顯示為一個(gè)按鈕。拖拽一個(gè)實(shí)例組件到畫布中，我們就可以在右邊通過選擇屬性來切換不同的按鈕變體了。6）屬性值順序調(diào)整這里右側(cè)的屬性名和屬性值的顯示順序可以在變體組件集的面板中調(diào)整。從組件調(diào)用面板拖拽出來的實(shí)例組件，各項(xiàng)屬性值都默認(rèn)選第

14、一個(gè)，所以我們一般會(huì)把使用頻率比較大的屬性值排在第一位。7）組件屬性- 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)用的時(shí)候，就能通過開關(guān)的形式來切換是否現(xiàn)實(shí)圖標(biāo)，同時(shí)組件集內(nèi)部的數(shù)量也并不會(huì)增加，可以節(jié)省內(nèi)存消耗。8）組件集內(nèi)增加組件我們可以直接在變體組件集里面添加新的組件，選中變體組件集之后在右下角出現(xiàn)一個(gè)紫色的加號(hào)，點(diǎn)擊它可以添加變體組件。9）組件集屬性沖突假設(shè)我們要添加

15、一個(gè)禁用狀態(tài)的主按鈕。點(diǎn)擊添加變體，此時(shí)虛線框中會(huì)復(fù)制出一個(gè)按鈕，我們把它的背景色修改?？梢钥吹?，選中變體組件集時(shí)在右側(cè)會(huì)出現(xiàn)屬性沖突的提示。因?yàn)檫@個(gè)新添加的變體組件屬性也會(huì)被復(fù)制過來，和已有的組件屬性一樣，就有了沖突。這里發(fā)生沖突的是它的 State 屬性，它也是 Default，我們把它更改為 Disable，屬性沖突的提示就消失了。10）組件集內(nèi)增加屬性名當(dāng)需要增加屬性類型的維度時(shí)，可以點(diǎn)擊 Properties 右側(cè)的加號(hào)按鈕，創(chuàng)建新的 Variant，創(chuàng)建好之后相當(dāng)于多了一個(gè)新的屬性名，便可以將每個(gè)組件設(shè)置對(duì)應(yīng)屬性名的屬性值。11）注意事項(xiàng)變體可以幫我們避免大海撈針式的選擇，將組件切

16、換簡化為少量屬性組合，但是在創(chuàng)建和使用變體時(shí)養(yǎng)成一些好的習(xí)慣可以幫我們更好的利用它。并不是任何組件都適合組合在一起成為變體，我們一般把同一組件的不同狀態(tài)組合為變體；切換變體的時(shí)候也相當(dāng)于替換組件，所以我們要確保一個(gè)變體組件集內(nèi)的各個(gè)組件結(jié)構(gòu)和命名一致，這樣在切換的時(shí)候已修改的屬性才會(huì)被保留；如果需要解除變體組件集，可以直接將組件從虛線框內(nèi)拖拽出來，全部拖拽出來這個(gè)組件集虛線框就會(huì)消失；組件集也是一個(gè) Frame，不過是一個(gè)特殊的 Frame，這個(gè)紫色虛線框是可以修改的，你還可以給它添加自動(dòng)布局屬性來自動(dòng)排布里面的組件變體；使用 Config 2022 更新的組件屬性中的新功能，例如 Boole

17、an Property、Swap Instance Property，可以一定程度上減少組建集內(nèi)部的組件數(shù)量，避免巨型變體組件集，如果 一個(gè)變體組件集內(nèi)有幾千個(gè)組件，可能會(huì)消耗大量內(nèi)存，導(dǎo)致操作 Figma 卡頓。四、Figma 組件庫的發(fā)布、更新和使用組件庫制定的意義，就是讓團(tuán)隊(duì)每一位成員都能用到最新的組件，提升效率、保證一致輸出。那么接下來就講一下如何在 Figma 中發(fā)布、更新和適用組件庫1. 發(fā)布組件庫Asset 點(diǎn)擊 Team library 按鈕（書本圖標(biāo)）；Library 面板上，點(diǎn) Publish；二次確認(rèn)面板，再次點(diǎn)擊 Publish 即可發(fā)布成功；1）發(fā)布頻率當(dāng)組件庫發(fā)生變

18、動(dòng)，維護(hù)者發(fā)布后使用者在文件中會(huì)收到通知，來決定是否同步更新到設(shè)計(jì)稿。如果維護(hù)者頻繁發(fā)布，使用者也會(huì)頻繁收到通知，所以最好將更新發(fā)布固定在一定頻率，比如每天下午六點(diǎn)發(fā)布一次，這樣使用者只需要每天早上更新一次就可以了。2）私有組件 Private components當(dāng)組件庫中有一些臨時(shí)或者很少復(fù)用的組件，可以給這些臨時(shí)組件的命名前加上 _ 或者 . ，也就是英文符號(hào)下劃線或點(diǎn)。在發(fā)布組件庫的時(shí)候，F(xiàn)igma 會(huì)自動(dòng)隱藏這些私有組件，這樣你在構(gòu)建組件庫的時(shí)候可以遵循原子化方法，同時(shí)發(fā)布出去給其他設(shè)計(jì)師使用的組件庫也很簡潔，不會(huì)有一些臨時(shí)組件。2. 復(fù)用組件庫創(chuàng)完了組件庫，團(tuán)隊(duì)成員的復(fù)用步驟如下：

19、在Tteam library 開啟想生效的組件庫，開啟后在 Assets 中就可以找到組件庫對(duì)應(yīng)的組件然后復(fù)用，可以通過分組形勢(shì)查找，也可以通過關(guān)鍵詞模糊搜索。3. 更新組件庫組件庫也可以理解成是設(shè)計(jì)團(tuán)隊(duì)的一個(gè)小的產(chǎn)品，也是需要不斷更新迭代的，當(dāng)我們的組件庫有更新內(nèi)容的時(shí)候，可以和發(fā)布組件時(shí)進(jìn)行同樣的操作，點(diǎn)擊 Assets 面板中的 Team Library 按鈕，就能將在組件庫中修改的內(nèi)容發(fā)布更新至云端。1）同步云端組件庫當(dāng)原組件庫發(fā)生變化，F(xiàn)igma 右下方回彈出一個(gè)提示框，點(diǎn)擊 Review 進(jìn)行查看，可以預(yù)覽所有在本文件中用到的組件庫中的組件的更新的情況，確認(rèn)之后點(diǎn)擊更新，即可將變化同步到所有用到此組件庫的文件。通過這種更新同步組件庫的方式，便能夠達(dá)到一鍵修改，全劇替換的便捷操作。2）復(fù)制組件的注意事項(xiàng)組件通過復(fù)制粘貼來復(fù)用只適用于兩種情況：對(duì)于同文件下完全適用；對(duì)于跨文件的情況，組件只有在作為組件庫發(fā)布后才可以跨文件粘貼復(fù)用，否則，復(fù)制粘貼的方式只能直接拷貝母版，無法以實(shí)例的狀態(tài)拷貝！比如上面做好的 Button 組件，同文件復(fù)制粘貼沒有問題。但對(duì)于跨文件復(fù)用