Figma系統組件庫搭建全攻略！

Sponsor

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

看完本文你將會學到：

1、Sketch與Figma組件庫的區別

2、Figma組件庫搭建經驗分享

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

組件與變體：組件分類結構化原則、變體創建命名技巧、優化變體層級、組件預覽展開還是合并、開關的使用和組件的鏈接等

組件文檔：文檔結構層級

組件庫發布、使用、更新

3、Figma組件庫搭建Tips分享

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

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

相對Sketch，Figma組件庫有哪些特點？

在Figma之前，我們都習慣了用Sketch創建組件庫。但當開始使用Figma后，發現Figma不僅繼承了Sketch組件庫的優點，并且更加靈活和強大。

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

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

Figma組件庫搭建

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

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

組件庫的基礎構成

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

組件庫一般由基礎樣式、控件和組件文檔構成?；A樣式包括顏色樣式、文字樣式、效果樣式(主要是陰影)，組件主要就是控件(相當于Sketch的Symbols)，組件文檔相當于對組件的樣式和狀態的展示說明。

組件庫——基礎樣式搭建

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

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

全局樣式——顏色樣式

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

全局樣式——文字樣式

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

全局樣式——效果樣式

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

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

Component組件

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

Auto layout——創建組件能用盡用

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

組件結構化——尋找操作更容易

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

強大的變體功能——構建組件庫的靈魂和精髓

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

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

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

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

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

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

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

分門別類——變體創建的精髓

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

化繁為簡——優化變體層級

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

組件鏈接——組件跳一跳，規則全知道

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

資源預覽——展開還是合并更好？

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

開關——怎么這么好用

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

組件文檔——組件類型和狀態的展示說明

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

組件庫——發布、更新、使用

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

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

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

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

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

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

如果你有一個只有兩個可能選項的屬性，Figma 將true/false、yes/no和 on/off都識別為開關。

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

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

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

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

組件內部預設元素只能減少，要增加需拆解。

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

使用Autolay out，對齊自適應更智能。

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

跨文件使用組件，只能通過專業版團隊的團隊庫發布和使用組件。

結語

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

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

作者 |?百度MEUX –?商業用戶體驗
來源 |?百度MEUX（ID:baidumeux）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。