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

看完本文你將會(huì)學(xué)到：
1、Sketch與Figma組件庫的區(qū)別
2、Figma組件庫搭建經(jīng)驗(yàn)分享

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

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

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

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

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

相對(duì)Sketch，F(xiàn)igma組件庫有哪些特點(diǎn)？? ? ? 在Figma之前，我們都習(xí)慣了用Sketch創(chuàng)建組件庫。但當(dāng)開始使用Figma后，發(fā)現(xiàn)Figma不僅繼承了Sketch組件庫的優(yōu)點(diǎn)，并且更加靈活和強(qiáng)大。? ? ? 舉一個(gè)簡(jiǎn)單的例子，如果想要修改組件的文本樣式或者不同組件的顏色時(shí)，在Sketch中，就必須提前做好所有可能的文本/圖層樣式，非常的費(fèi)時(shí)費(fèi)力。但Figma強(qiáng)大的實(shí)例Instances功能，無須提前做好所有的樣式，可以直接在實(shí)例上修改字體、顏色、描邊、投影等，但又不會(huì)干擾到父級(jí)的樣式，而修改父級(jí)的樣式又能修改全局，非常的方便。又比如想要去切換一個(gè)按鈕的狀態(tài)，或者是否帶圖標(biāo)時(shí)，F(xiàn)igma強(qiáng)大的變體功能可以將這些屬性進(jìn)行分類整合在一起，組件調(diào)用更便捷，這都是Sketch組件不具備的功能。? ? ? 除了實(shí)例、變體功能外，跨團(tuán)隊(duì)使用組件庫(樣式、組件)、實(shí)時(shí)更新、組件庫的主題顏色一鍵切換、組件可以增加提示語等功能，都是Sketch不具備的。?Figma組件庫搭建? ? ? 提到組件庫，不得不提到原子構(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)來說，我們的顏色、字體、圖標(biāo)以及按鈕、標(biāo)簽等都會(huì)對(duì)應(yīng)到相應(yīng)的原子和分子，通過組件之間的搭配組合，最終構(gòu)成頁面。

組件庫的基礎(chǔ)構(gòu)成? ? ? 按照原子設(shè)計(jì)理論的思路，首先需要將組件庫的類型進(jìn)行分類，然后再從基礎(chǔ)和核心的元素入手，進(jìn)行元素、組件、模塊的搭建。? ? ? 組件庫一般由基礎(chǔ)樣式、控件和組件文檔構(gòu)成?；A(chǔ)樣式包括顏色樣式、文字樣式、效果樣式(主要是陰影)，組件主要就是控件(相當(dāng)于Sketch的Symbols)，組件文檔相當(dāng)于對(duì)組件的樣式和狀態(tài)的展示說明。

組件庫——基礎(chǔ)樣式搭建? ? ? 我們可以直接在文檔里創(chuàng)建樣式庫，簡(jiǎn)單且靈活。當(dāng)然更建議大家單獨(dú)創(chuàng)建一個(gè)全局樣式的文件，包括顏色、文字、效果等，這樣做的好處是在以后進(jìn)行項(xiàng)目切換時(shí)，可以很方便快速的進(jìn)行配置和替換，且可以共用一份原始的組件，高效且有關(guān)聯(lián)性。? ? ? 這里要跟大家提一個(gè)概念Design Token。Design Token是存儲(chǔ)樣式值(如色值、字重、陰影、圓角等)的載體。Design Token最重要的意義是做到設(shè)計(jì)與研發(fā)的樣式完全打通，進(jìn)行無損耗的溝通，增強(qiáng)系統(tǒng)的可維護(hù)性，同時(shí)可以約束設(shè)計(jì)側(cè)的樣式數(shù)量。但是Figma本身對(duì)Token的支持不夠全面，比如圓角等，所以需要自研插件來彌補(bǔ)這些不足。
全局樣式——顏色樣式? ? ? 顏色是頁面整體風(fēng)格表現(xiàn)的重要基本元素，它可以建立品牌的識(shí)別性，梳理頁面的視覺層級(jí)關(guān)系，突出內(nèi)容并平衡其他視覺元素。建議大家可以按照功能和屬性，將顏色進(jìn)行分組分類命名，比如主色、淺主色、中性色和功能色等，并將默認(rèn)、懸浮、點(diǎn)擊、禁用等顏色放在一組，方便大家使用。

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

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

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

Component組件? ? ? Component組件相當(dāng)于Sketch的Symbol。不同之處在于Component比Symbol更靈活更強(qiáng)大，我們可以用更少的組件做更多的事情，接下來會(huì)通過以下幾個(gè)方面來簡(jiǎn)要介紹一下Figma中組件的相關(guān)知識(shí)。
Auto layout——創(chuàng)建組件能用盡用? ? ? Auto layout是Figma非常強(qiáng)大的一個(gè)功能，創(chuàng)建帶有自動(dòng)布局的組件，通過組合這些響應(yīng)組件，可以創(chuàng)建可跨多種設(shè)備類型工作的設(shè)計(jì)。在創(chuàng)建組件的時(shí)候，一定要把這個(gè)功能很好的應(yīng)用，這樣對(duì)于組件的拓展和應(yīng)用會(huì)非常靈活。比如常用的按鈕、對(duì)話框、Toast等等組件，能用盡用。

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

強(qiáng)大的變體功能——構(gòu)建組件庫的靈魂和精髓? ? ? 談到組件，不得不提到Figma強(qiáng)大的變體功能。用戶可以通過變體功能更加方便和靈活的調(diào)用組件庫，這相對(duì)于Sketch來說，簡(jiǎn)直是好用太多。? ? ? 當(dāng)你創(chuàng)建組件并建立起你的設(shè)計(jì)系統(tǒng)時(shí)，你會(huì)發(fā)現(xiàn)需要一些彼此相似的組件，而只有微小的差別。例如：多個(gè)按鈕的組件，有不同狀態(tài)和尺寸的獨(dú)立組件，以及明暗模式或者有無icon等，都可以用變體的形式去創(chuàng)建。

超好用的變體功能——理解屬性和值的概念很重要? ? ? 大家在創(chuàng)建變體的時(shí)候經(jīng)常會(huì)有一些困惑，尤其是對(duì)于狀態(tài)非常繁雜的組件，簡(jiǎn)直是無從下手，尤其是對(duì)于屬性Property和值Variant更是覺得很模糊。這里有一些經(jīng)驗(yàn)分享給大家:? ? ? 首先要了解下一相關(guān)的概念，屬性Property：是組件的可變方面。例如：一個(gè)按鈕組件的屬性可以是尺寸、狀態(tài)，或是否有icon，可以將其理解為分類。? ? ? 值Variant：是每個(gè)屬性可用的不同選項(xiàng)。例如：狀態(tài)屬性可以有默認(rèn)、懸浮、點(diǎn)擊和禁用等，可以將其理解為分類下的參數(shù)。然后再了解一下Figma的命名規(guī)則，F(xiàn)igma 使用斜線命名系統(tǒng)來組織資產(chǎn)面板和實(shí)例菜單中的組件。? ? ? 組件名稱中的每一個(gè)"/"都會(huì)創(chuàng)建一個(gè)層次。第一個(gè)"/"之前的文字將成為組件集的名稱，這里需要著重注意一下。比如名稱為Button/Primary/Large/Default/False的按鈕組件將有以下屬性和值。組件名稱/值/值/值/值。變體名稱遵循這個(gè)結(jié)構(gòu)，Property1=value, Property2=value, Property3=value。

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

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

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

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

開關(guān)——怎么這么好用? ? ? 大家在建設(shè)組件的時(shí)候都會(huì)發(fā)現(xiàn)一個(gè)問題，有的組件是開關(guān)顯示的，有的是下拉顯示的。這是因?yàn)槿绻阌幸粋€(gè)只有兩個(gè)可能選項(xiàng)的屬性，F(xiàn)igma會(huì)自動(dòng)將true/false、yes/no和on/off都識(shí)別為開關(guān)。所以大家在做變體的時(shí)候，盡可能的將這種只有兩個(gè)可能屬性的選項(xiàng)顯示為開關(guān)，減少用戶的操作流程。

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

組件庫——發(fā)布、更新、使用? ? ? 可以將組件庫發(fā)布到團(tuán)隊(duì)的資源庫。如果要跨文件使用組件，只能通過專業(yè)版團(tuán)隊(duì)的團(tuán)隊(duì)庫發(fā)布和使用。當(dāng)每次有更新發(fā)布樣式或主組件時(shí)，F(xiàn)igma將自動(dòng)通知到每一個(gè)成員，點(diǎn)擊更新即可應(yīng)用。管理員可以提前默認(rèn)設(shè)置將哪些組件庫開啟哦，減少了新用戶每次進(jìn)入頁面還要重新選擇。? ? ? 在Assets面板下，可以通過搜索的方式找到需要調(diào)用的組件；也可以通過展開菜單的方式找到需要的組件。將需要使用的組件直接拖動(dòng)至文件中，便可使用。推薦大家使用搜索的方法，效率會(huì)更高。

組織版——更加強(qiáng)大的功能體驗(yàn)? ? ? 對(duì)于組織版來說，我覺得比較好用的功能就是組件統(tǒng)計(jì)和分支。Figma組織版可以統(tǒng)計(jì)組件數(shù)量、使用團(tuán)隊(duì)、調(diào)用次數(shù)等，這對(duì)于組件的使用情況統(tǒng)計(jì)來說，非常的方便和直觀。分支功能可以讓每個(gè)成員單獨(dú)創(chuàng)建主文件的分支，可以在其中探索對(duì)文件或庫的樣式、組件和其他方面的更改，而不會(huì)影響主文件。當(dāng)更改感到滿意時(shí)，你可以查看分支并將其與主文件合并。所以對(duì)于團(tuán)隊(duì)來說，組織版的這兩個(gè)功能還是非常實(shí)用的。?Figma組件庫搭建Tips——全是干貨，一目了然

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

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

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

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

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

• 使用·或者_(dá)可隱藏不需要展示的組件。

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

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

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

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

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

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

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

感謝閱讀，以上內(nèi)容均由百度MEUX團(tuán)隊(duì)原創(chuàng)設(shè)計(jì)，以及百度MEUX版權(quán)所有，轉(zhuǎn)載請(qǐng)注明出處，違者必究，謝謝您的合作。