組件庫是一個強大的提效工具，對于設(shè)計師和開發(fā)來說有了統(tǒng)一的標準，輸出的效率也會大大提高。

隨著設(shè)計工具的不斷發(fā)展，F(xiàn)igma 逐漸成為各大公司的主流設(shè)計軟件。Figma 強大的組件庫能力，非常適合團隊設(shè)計系統(tǒng)的建設(shè)與應(yīng)用。相比 Sketch，F(xiàn)igma 在 Auto layout、變體和實例等方面極大的提升了組件庫的設(shè)計靈活度和效率。

看完本文你將會學到：

1. Sketch 與 Figma 組件庫的區(qū)別

2. Figma 組件庫搭建經(jīng)驗分享

基礎(chǔ)樣式：字體（分層分級技巧）、顏色（分組排列規(guī)則）、陰影（分類、三層陰影）等

組件與變體：組件分類結(jié)構(gòu)化原則、變體創(chuàng)建命名技巧、優(yōu)化變體層級、組件預(yù)覽展開還是合并、開關(guān)的使用和組件的鏈接等

組件文檔：文檔結(jié)構(gòu)層級

組件庫發(fā)布、使用、更新

3. Figma 組件庫搭建 Tips 分享

先簡單聊一下為什么要做組件庫？

組件庫是將界面設(shè)計中的具有通用性和標準規(guī)范的基礎(chǔ)元素和重復(fù)出現(xiàn)的控件進行歸納整理，通過對控件進行分類和命名，最終形成一個可快速復(fù)用，便捷維護的資源庫。對于設(shè)計師和開發(fā)來說，簡單上手，可復(fù)用強，穩(wěn)定且高效的組件庫是非常有必要的。組件庫更像是一個強大的工具庫，既能提高團隊的協(xié)作效率，也能保證團隊設(shè)計輸出的統(tǒng)一性、高效性和延續(xù)性。

相對 Sketch，F(xiàn)igma 組件庫有哪些特點？

在 Figma 之前，我們都習慣了用 Sketch 創(chuàng)建組件庫。但當開始使用 Figma 后，發(fā)現(xiàn) Figma 不僅繼承了 Sketch 組件庫的優(yōu)點，并且更加靈活和強大。

舉一個簡單的例子，如果想要修改組件的文本樣式或者不同組件的顏色時，在 Sketch 中，就必須提前做好所有可能的文本/圖層樣式，非常的費時費力。但 Figma 強大的實例 Instances 功能，無須提前做好所有的樣式，可以直接在實例上修改字體、顏色、描邊、投影等，但又不會干擾到父級的樣式，而修改父級的樣式又能修改全局，非常的方便。又比如想要去切換一個按鈕的狀態(tài)，或者是否帶圖標時，F(xiàn)igma 強大的變體功能可以將這些屬性進行分類整合在一起，組件調(diào)用更便捷，這都是 Sketch 組件不具備的功能。

除了實例、變體功能外，跨團隊使用組件庫（樣式、組件）、實時更新、組件庫的主題顏色一鍵切換、組件可以增加提示語等功能，都是 Sketch 不具備的。

Figma 組件庫搭建

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

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

組件庫的基礎(chǔ)構(gòu)成

按照原子設(shè)計理論的思路，首先需要將組件庫的類型進行分類，然后再從基礎(chǔ)和核心的元素入手，進行元素、組件、模塊的搭建。

組件庫一般由基礎(chǔ)樣式、控件和組件文檔構(gòu)成。基礎(chǔ)樣式包括顏色樣式、文字樣式、效果樣式（主要是陰影），組件主要就是控件（相當于 Sketch 的 Symbols），組件文檔相當于對組件的樣式和狀態(tài)的展示說明。

1. 組件庫：基礎(chǔ)樣式搭建

我們可以直接在文檔里創(chuàng)建樣式庫，簡單且靈活。當然更建議大家單獨創(chuàng)建一個全局樣式的文件，包括顏色、文字、效果等，這樣做的好處是在以后進行項目切換時，可以很方便快速的進行配置和替換，且可以共用一份原始的組件，高效且有關(guān)聯(lián)性。

這里要跟大家提一個概念 Design Token。Design Token 是存儲樣式值（如色值、字重、陰影、圓角等）的載體。Design Token 最重要的意義是做到設(shè)計與研發(fā)的樣式完全打通，進行無損耗的溝通，增強系統(tǒng)的可維護性，同時可以約束設(shè)計側(cè)的樣式數(shù)量。但是 Figma 本身對 Token 的支持不夠全面，比如圓角等，所以需要自研插件來彌補這些不足。

全局樣式：顏色樣式

顏色是頁面整體風格表現(xiàn)的重要基本元素，它可以建立品牌的識別性，梳理頁面的視覺層級關(guān)系，突出內(nèi)容并平衡其他視覺元素。建議大家可以按照功能和屬性，將顏色進行分組分類命名，比如主色、淺主色、中性色和功能色等，并將默認、懸浮、點擊、禁用等顏色放在一組，方便大家使用。

全局樣式：文字樣式

在文字樣式中會包括：字號、字重、行高和字距等。在創(chuàng)建文字樣式前，將文字樣式分為段落樣式和文本樣式加以區(qū)別。將產(chǎn)品內(nèi)的一些文字梯度以及功能描述等用表格的形式進行整理，并分別創(chuàng)建相應(yīng)的字號和字重。需要注意的是不要單純的將名稱命名為 T0、T1 等純符號性的名稱，可以在后面加上適當?shù)拿枋?，比?T0 輔助、T1 標準等文案，同時也可以在描述里添加對應(yīng)的使用說明，這樣當鼠標懸浮在這個樣式上，會給用戶帶來提示性的預(yù)覽。這種辦法同樣適用于顏色、陰影等全局樣式，會更加方便大家調(diào)用且能夠很好的解除新用戶的使用疑慮。

全局樣式：效果樣式

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

同時，為了讓組件庫陰影層級更加豐富通用，我們將陰影層級劃分了 S 類和 L 類兩個層級。S 類陰影用于通過交互后出現(xiàn)的場景，其內(nèi)容帶來上下文信息切換，需要搶占用戶注意力，更需要提供明確的邊界，主要用于基礎(chǔ)組件。L 類陰影往往用于多個共存的列表，更加強調(diào)整體的柔和性，主要用于導(dǎo)航、首頁、模版等業(yè)務(wù)場景。同時為了能讓大家更加清晰的區(qū)分陰影的層級，會將常用的一些組件和場景填充在一個表格中，方便大家查閱。

2. Component 組件

Component 組件相當于 Sketch 的 Symbol。不同之處在于 Component 比 Symbol 更靈活更強大，我們可以用更少的組件做更多的事情，接下來會通過以下幾個方面來簡要介紹一下 Figma 中組件的相關(guān)知識。

Auto layout：創(chuàng)建組件能用盡用

Auto layout 是 Figma 非常強大的一個功能，創(chuàng)建帶有自動布局的組件，通過組合這些響應(yīng)組件，可以創(chuàng)建可跨多種設(shè)備類型工作的設(shè)計。在創(chuàng)建組件的時候，一定要把這個功能很好的應(yīng)用，這樣對于組件的拓展和應(yīng)用會非常靈活。比如常用的按鈕、對話框、Toast 等等組件，能用盡用。

組件結(jié)構(gòu)化：尋找操作更容易

結(jié)構(gòu)化的基本原則是：方便檢索控件（Components）、方便編輯控件、清晰地傳達控件分組和狀態(tài)。建議在團隊或公司中定義好組件的結(jié)構(gòu)，可依照自己相關(guān)的業(yè)務(wù)，將一些通用性較強的基礎(chǔ)組件進行劃分。將組件按照屬性和狀態(tài)放在不同的頁面里，而不是將所有組件全部堆疊在一個頁面。比如數(shù)據(jù)輸入類下面，將常用的輸入框、單復(fù)選、上傳等放置到一起，這使得以下操作變得更容易：在資源面板中查找組件、相關(guān)組件之間的交換、提高公司內(nèi)團隊資源庫的使用率。

強大的變體功能：構(gòu)建組件庫的靈魂和精髓

談到組件，不得不提到 Figma 強大的變體功能。用戶可以通過變體功能更加方便和靈活的調(diào)用組件庫，這相對于 Sketch 來說，簡直是好用太多。

當你創(chuàng)建組件并建立起你的設(shè)計系統(tǒng)時，你會發(fā)現(xiàn)需要一些彼此相似的組件，而只有微小的差別。例如：多個按鈕的組件，有不同狀態(tài)和尺寸的獨立組件，以及明暗模式或者有無 icon 等，都可以用變體的形式去創(chuàng)建。

超好用的變體功能——理解屬性和值的概念很重要

大家在創(chuàng)建變體的時候經(jīng)常會有一些困惑，尤其是對于狀態(tài)非常繁雜的組件，簡直是無從下手，尤其是對于屬性 Property 和值 Variant 更是覺得很模糊。這里有一些經(jīng)驗分享給大家:

首先要了解下一相關(guān)的概念，屬性 Property：是組件的可變方面。例如：一個按鈕組件的屬性可以是尺寸、狀態(tài)，或是否有 icon，可以將其理解為分類。

值 Variant：是每個屬性可用的不同選項。例如：狀態(tài)屬性可以有默認、懸浮、點擊和禁用等，可以將其理解為分類下的參數(shù)。然后再了解一下 Figma 的命名規(guī)則，F(xiàn)igma 使用斜線命名系統(tǒng)來組織資產(chǎn)面板和實例菜單中的組件。

組件名稱中的每一個"/"都會創(chuàng)建一個層次。第一個"/"之前的文字將成為組件集的名稱，這里需要著重注意一下。比如名稱為 Button/Primary/Large/Default/False 的按鈕組件將有以下屬性和值。組件名稱/值/值/值/值。變體名稱遵循這個結(jié)構(gòu)，Property1=value, Property2=value, Property3=value。

分門別類：變體創(chuàng)建的精髓

掌握好命名規(guī)則就掌握了變體創(chuàng)建的精髓。教給大家一個非常好用的方法，在創(chuàng)建變體前，首先把需要創(chuàng)建變體的組件進行分類，并統(tǒng)一放在一個草稿上，比如說按鈕的尺寸、狀態(tài)、有無圖標等。然后將對應(yīng)的分類寫出相應(yīng)的值，比如尺寸對應(yīng)的值就是 m 和 s，狀態(tài)對應(yīng)的就是默認、懸浮、點擊等。分類好以后，按照上面所述屬性和值的對應(yīng)關(guān)系，分別將這些屬性和值一一對應(yīng)填在草稿上。然后再根據(jù) Figma 的命名規(guī)則，將所有組件的名稱命名完成，比如 Button/m/默認/no/yes，然后就可以直接創(chuàng)建了。

化繁為簡：優(yōu)化變體層級

Figma 的變體功能很強大，可以進行很多樣式的排列組合。但是我們也發(fā)現(xiàn)在創(chuàng)建變體的時候，如果按照每個狀態(tài)、種類進行劃分的時候，整個組件會非常的繁雜臃腫。比如 Popover，會發(fā)現(xiàn)在創(chuàng)建它的各種狀態(tài)時會非常麻煩，除了箭頭在各個方向的位置外，還要考慮里面元素的組合，比如純文本、標題+文本、標題+圖文、文本+按鈕等等，這樣組合起來的組件會非常的臃腫，也不利于設(shè)計師去選擇。所以我們要學會層級的梳理，比如可以將箭頭、按鈕、標題圖文進行一個分布組合，然后再將這些組合成一個新的組件，通過嵌套的層級關(guān)系去調(diào)整每個層級的位置關(guān)系或者剔除某些不需要的層級。

組件鏈接：組件跳一跳，規(guī)則全知道

創(chuàng)建好組件以后，可以給每個組件都添加相關(guān)的鏈接，這個鏈接可以添加到組件的描述中，這樣開發(fā)人員和設(shè)計人員就可以在 Inspect 中點擊相關(guān)的按鈕直接跳轉(zhuǎn)鏈接了，簡直不要太好用。比如組件文檔鏈接（可以查看詳細的交互規(guī)則）、線上的開發(fā)地址（可以查看線上的樣式），以及直接點擊右上角的跳轉(zhuǎn)按鈕跳轉(zhuǎn)到組件文檔。這樣就打通了所有線上線下的樣式規(guī)則，非常方便用戶查閱和使用。

資源預(yù)覽：展開還是合并更好？

相信大家在調(diào)用組件的時候都會發(fā)現(xiàn)一個問題，有的變體預(yù)覽是展開顯示的，有的變體預(yù)覽是合并在一起的，那么這個分類辦法到底是怎么去劃分的呢？通常來說需要大家一眼就能選擇，減少用戶思考的，可以考慮分開建設(shè)變體，比如常見的按鈕。我們只需要預(yù)覽圖下的各種形態(tài)就能找到想要調(diào)用的按鈕類型。如果按鈕全部的集合到一個變體中，那么大家看到的只有一個按鈕，對于用戶來說會增加判斷和選擇的時間，是很不方便的。但是對于一些大家理解起來比較容易且展開后的變體樣式非常多的的組件，比如 toast、表格，不需要將其各種變體分別的羅列出來，引導(dǎo)用戶點擊進去，再選擇就好了。

開關(guān)：怎么這么好用

大家在建設(shè)組件的時候都會發(fā)現(xiàn)一個問題，有的組件是開關(guān)顯示的，有的是下拉顯示的。這是因為如果你有一個只有兩個可能選項的屬性，F(xiàn)igma 會自動將 true/false、yes/no 和 on/off 都識別為開關(guān)。所以大家在做變體的時候，盡可能的將這種只有兩個可能屬性的選項顯示為開關(guān)，減少用戶的操作流程。

組件文檔：組件類型和狀態(tài)的展示說明

為了方便大家能夠清晰知道組件的相關(guān)屬性和類別，可以為每個組件創(chuàng)建一個組件文檔，方便大家查閱和調(diào)用。這對于剛接觸到這個組件的人來說非常友好。組件文檔的結(jié)構(gòu)一般是由組件名稱、母文檔鏈接（交互說明）、基本樣式、主要組件和相關(guān)組件構(gòu)組成。在這個文檔里可以查看組件的類別和相關(guān)狀態(tài)，以及組成這個組件用到的其他組件，并且通過鏈接都可以跳轉(zhuǎn)到相應(yīng)的組件，非常方便。

組件庫：發(fā)布、更新、使用

可以將組件庫發(fā)布到團隊的資源庫。如果要跨文件使用組件，只能通過專業(yè)版團隊的團隊庫發(fā)布和使用。當每次有更新發(fā)布樣式或主組件時，F(xiàn)igma 將自動通知到每一個成員，點擊更新即可應(yīng)用。管理員可以提前默認設(shè)置將哪些組件庫開啟哦，減少了新用戶每次進入頁面還要重新選擇。

在 Assets 面板下，可以通過搜索的方式找到需要調(diào)用的組件；也可以通過展開菜單的方式找到需要的組件。將需要使用的組件直接拖動至文件中，便可使用。推薦大家使用搜索的方法，效率會更高。

組織版：更加強大的功能體驗

對于組織版來說，我覺得比較好用的功能就是組件統(tǒng)計和分支。Figma 組織版可以統(tǒng)計組件數(shù)量、使用團隊、調(diào)用次數(shù)等，這對于組件的使用情況統(tǒng)計來說，非常的方便和直觀。分支功能可以讓每個成員單獨創(chuàng)建主文件的分支，可以在其中探索對文件或庫的樣式、組件和其他方面的更改，而不會影響主文件。當更改感到滿意時，你可以查看分支并將其與主文件合并。所以對于團隊來說，組織版的這兩個功能還是非常實用的。

Figma 組件庫搭建 Tips：全是干貨，一目了然

為了確保值與屬性相匹配，每個組件都需要有相同數(shù)量的斜線。

如果你有一個只有兩個可能選項的屬性，F(xiàn)igma 將 true/false、yes/no 和 on/off 都識別為開關(guān)。

修復(fù)值的沖突錯誤：如果任何變體的值組合完全相同，F(xiàn)igma 會讓你知道存在沖突。即使變體本身在視覺上不同，也會看到這個錯誤。

Figma 將使用左上角的變體作為默認變體，此變體將代表資產(chǎn)面板中的整個組件集。

如果你不確定某個組件集有哪些變體，或者它們的原始樣式，你可以在原始文件中查看組件集。

使用·或者_可隱藏不需要展示的組件。

組件內(nèi)部預(yù)設(shè)元素只能減少，要增加需拆解。

不要將組件完全拆解、嵌套元素都支持修改。

使用 Autolay out，對齊自適應(yīng)更智能。

使用全局樣式，一鍵修改更方便。

跨文件使用組件，只能通過專業(yè)版團隊的團隊庫發(fā)布和使用組件。

結(jié)語

組件庫是一個強大的提效工具，對于設(shè)計師和開發(fā)來說有了統(tǒng)一的標準，輸出的效率也會大大提高。對于團隊來說能很好的提升產(chǎn)品的品牌感和體驗，尤其在 Figma 強大特性的幫助下，將發(fā)揮更大的作用。同時我們也一定要學會整體思考、善于總結(jié)，不斷優(yōu)化和完善組件的細節(jié)，將組件庫的特性發(fā)揮到最大。

由于篇幅有限，關(guān)于組件庫某些內(nèi)容介紹的不夠全面，如果有不嚴謹、錯誤的地方還望大家給與指正，歡迎大家一起學習和討論。

百度MEUX