最近團隊嘗試使用Figma構(gòu)建一套適用團隊的組件庫與規(guī)范，發(fā)現(xiàn)Figma比Sketch的構(gòu)建方式要更簡單和更靈活，尤其是自動布局（Auto Layout）和聯(lián)級嵌套能極大提升組件庫的設(shè)計靈活度；另外Figma插件庫日新月異，能夠有效提升組件庫在構(gòu)建過程中的效率。本文主要分享了我們團隊在創(chuàng)建組件庫中的一些經(jīng)驗方法。
首先我們確定組件庫框架包含哪些內(nèi)容，這里主要針對ToB端的業(yè)務(wù)場景來進行演示。
B端業(yè)務(wù)組件庫框架內(nèi)容相比C端產(chǎn)品的要復(fù)雜且難以上手，除了對產(chǎn)品業(yè)務(wù)的理解和掌握之外，組件庫到底有哪些內(nèi)容？針對我們團隊所接觸的B端業(yè)務(wù)場景進行需求整體、分析、調(diào)研并抽象出具體的組件庫框架：
- 主題樣式
- 基礎(chǔ)組件
- 框架模式
- 拓展控件
- 通用模板
- 規(guī)范映射表
可根據(jù)項目業(yè)務(wù)或產(chǎn)品場景需求去對框架內(nèi)容進行調(diào)整。
以下內(nèi)容會按照構(gòu)建順序進行拆解
1. 顏色
首先是顏色樣式的創(chuàng)建，顏色通常會包含主題（品牌）色，中性色或者輔助色，在Figma中我們唯一需要做的是對這些顏色進行命名管理；創(chuàng)建第一個顏色樣式后通過在文件標(biāo)題的下拉菜單中進行首次樣式發(fā)布，發(fā)布成功即可在其他Figma文件中引用。
△ 顏色的創(chuàng)建階度可以借助 Material Design Color tool 工具來輔助生成
2. 字體
Figma的字體樣式與Sketch的創(chuàng)建方式不同，F(xiàn)igma中只需要關(guān)注字號與字重即可，而過去在Sketch中除了對字號、字重創(chuàng)建以外還需對字體的對齊方式進行創(chuàng)建，這樣會增加樣式庫的管理維護成本，同時也增加了使用難度。
在Figma中我們只需關(guān)注組件庫需要用到的字號以及少量的字重，這里建議樣式創(chuàng)建要克制，盡可能保證樣式庫精簡適用。字號我們采用 12px-64px，使用了Regular和Bold兩種字重。
選擇一款字體（推薦思源黑體），字體需要考慮團隊協(xié)作中存在不同終端的適配問題，如果使用蘋方則Win系統(tǒng)中會出現(xiàn)字體丟失的情況，中文字體的使用插件 Chinese Font Picker 。
3. 圖標(biāo)
圖標(biāo)在之前的組件庫搭建中存在兩種嵌套方式，第一種是目前推薦的直接使用Svg的方式，通過導(dǎo)入Svg圖標(biāo)進行并創(chuàng)建成組件進行管理使用，輸出則選擇性輸出即可。第二種是將圖標(biāo)庫編譯成一個字體包，通過字體的方式去引用和管理，字體圖標(biāo)的應(yīng)用方式依然在許多B端系統(tǒng)上可見，過去存在瀏覽器版本和兼容性問題，字體圖標(biāo)是當(dāng)時最好的選擇；缺點是維護成本較高，圖標(biāo)字體包無法選擇性引用，字體包的大小會影響頁面加載性能。
4. 圖標(biāo)的批量創(chuàng)建與管理
在Figma中我們可以很輕松的去創(chuàng)建一個圖標(biāo)庫，得益于Figma支持批量創(chuàng)建Component，批量創(chuàng)建完以后我們再通過插件來實現(xiàn)圖標(biāo)組件的批量重命名。Rename It（重命名插件）Find & Focus（批量查找插件）
5. 陰影
陰影樣式的創(chuàng)建相對簡單，設(shè)置好陰影參數(shù)與對應(yīng)命名并逐個創(chuàng)建即可。
6. 圓角
組件庫中常用到圓角，圓角屬于組件庫中的一種樣式變量，圓角有很強的風(fēng)格屬性，因此過去我們會對圓角進行單獨管理以方便后期對組件庫中的圓角進行全局管理，在Figma中圓角沒有單獨的樣式管理屬性，只需要對圓角進行規(guī)范定義即可。圓角在組件庫中存在多種屬性狀態(tài)，例如按鈕組中就存在左右結(jié)構(gòu)的半圓角屬性，應(yīng)該在組件庫的創(chuàng)建過程中就提前考慮并約束。
7. 間距
在Figma中間距需要組件化（Component），自動布局（Auto Layout）可以算Figma組件化中的殺手锏，通過簡單的屬性設(shè)置就可以實現(xiàn)自動布局效果；在間距創(chuàng)建中需要對橫向（X軸）以及豎向（Y軸）分別進行創(chuàng)建并以不同的樣式來區(qū)分，當(dāng)然所有的間距都是通過母版（Master Component）進行復(fù)制創(chuàng)建的，這樣可以通過母版來對全局的間距進行樣式管控。
間距的數(shù)值設(shè)定可根據(jù)設(shè)計規(guī)范進行調(diào)整，我們采用了4px-256px的倍數(shù)區(qū)間，可以適應(yīng)大部分業(yè)務(wù)場景。
1. 規(guī)范映射表
為什么需要規(guī)范映射表？當(dāng)組件庫的樣式、組件、組件狀態(tài)到一定的數(shù)量就難以維護，設(shè)計與開發(fā)對接成本會顯著增高；如果我們通過一個映射表來對應(yīng)組件庫中的樣式和組件，提取組件庫中的變量并設(shè)定映射名稱，減少對樣式或組件本身的依賴性，而是通過修改映射參數(shù)來實現(xiàn)組件庫變更。
映射表中常需要對樣式中的顏色、字體、圓角、陰影、間距等樣式進行映射關(guān)聯(lián)，這些常用變量在開發(fā)過程中可以通過代碼進行關(guān)聯(lián)與 Figma中的組件庫關(guān)聯(lián)是一致的。
1. 按鈕
我們通過對按鈕組件的構(gòu)建進行剖析基本能夠掌握組件構(gòu)建的基本原理，其他組件的構(gòu)建方式基本無異，只存在嵌套層級的多少差異。
在構(gòu)建組件之前我們可以學(xué)習(xí) Atomic Design （原子設(shè)計）能幫助你深入了解構(gòu)建原理。
組件庫的構(gòu)建方式完全可以采用原子設(shè)計理論構(gòu)建：
Brad Forst（原子設(shè)計作者） 將此理論運用在界面設(shè)計中，形成一套設(shè)計系統(tǒng)，包含5個層面：原子、分子、組織、模板、頁面。
在組件庫搭建中，原子屬于最小顆粒度單位，例如：任一形狀、文字、顏色、圖標(biāo)等。
組件搭建除了需要掌握其構(gòu)成原理之外還需要了解每一個組件的類型、狀態(tài)、規(guī)格等信息，這些將是組件庫的核心內(nèi)容。
以按鈕為例，在ToB側(cè)Web端業(yè)務(wù)系統(tǒng)中常用到三種尺寸規(guī)格（24px、32px、40px），常用狀態(tài)包含：Normal、Hover、Focused、Pressed、Disabled；按鈕還擁有多個不同類型例如：Primary、Outline、Dashed、Danger，當(dāng)一個組件存在多種形態(tài)時意味著組件的復(fù)雜程度提升，維護成本增加。
通過之前的組件庫構(gòu)建經(jīng)驗來看，不同形態(tài)的相同組件的結(jié)構(gòu)一致，只存在樣式差異，而Figma剛好滿足這一需求，在相同的母版（Master Component）下的副件可以單獨設(shè)置樣式并不會影響與母版之前的關(guān)聯(lián)（Sketch無法讓副件與母版存在樣式差異）。
我們創(chuàng)建一個涵蓋所有按鈕形態(tài)的母版，通過拷貝副件并對副件進行樣式變更形成新的按鈕狀態(tài)，選中已經(jīng)變更樣式的副件創(chuàng)建為新的組件（Component），這樣就實現(xiàn)了組件分級嵌套效果。
△ 組件分級嵌套效果演示
組件分級嵌套可以幫助我們更加靈活的管理組件庫，上圖Master A為組件母版，而A1、A2、A3從母版拷貝而來（副件），對副件進行樣式修改后創(chuàng)建為新的組件并拷貝至A1_1、A1_2、A1_3，這樣就實現(xiàn)A 管控 所有A的副件，而A1可以單獨對A1_1進行管控而不影響其他副件。
1. 卡片
卡片屬于拓展控件可以對應(yīng) Atomic Design 中（原子、分子、組織、模板、頁面）里的「組織」，「組織」是通過原子或分子組合構(gòu)成。
相比按鈕，卡片在搭建過程中使用了間距；布局單一的按鈕只需要通過自動布局（Auto Layout）就可以滿足，而靈活多變的卡片則需要通過間距來配合自動布局實現(xiàn)最終效果。
在復(fù)合組件中需要滿足模塊替換的靈活性，我們通過給組件劃分為不同模塊，而模塊中的內(nèi)容可以自由定制。
△ 卡片組件的分解圖
通過分解圖我們可以了解需要替換的模塊必須為組件態(tài)（Component）且尺寸一致，滿足條件后只需選中該模塊右側(cè)屬性面板進行替換即可。
1. 頁面布局/柵格
Figma中的布局網(wǎng)格（Layout Grid）只針對畫布有效，因此在創(chuàng)建柵格布局前需要選中一個有效畫布，在右側(cè)屬性面板可以選擇列（Columns）行（Rows）或格（Grid）新建，設(shè)置好布局網(wǎng)格畫布里面的元素在靠近網(wǎng)格邊線時會有吸附效果可以輔助設(shè)計的準(zhǔn)確性。
2. 頁面結(jié)構(gòu)
左右結(jié)構(gòu)在ToB業(yè)務(wù)場景比較常見，類似的頁面結(jié)構(gòu)我們只需要把左側(cè)的菜單和頭部創(chuàng)建單獨的組件模塊即可。
通過組件嵌套我們可以輕松管理一套組件庫兩套顏色模式（淺色版與深色版）
1. 概覽&Dashboard
通過原子、分子、組織構(gòu)建模板，而模板的組合就能形成各種場景頁面。
通過自動布局（Auto Layout）我們可以對較為復(fù)雜的表格組件進行合理管控，例如新增刪除都能按照既定間距進行自動拓展。
同時通過組件嵌套實現(xiàn)表頭帶動表內(nèi)容進行聯(lián)動，極大的提高了在復(fù)雜場景下的設(shè)計效率。
組件庫的意義在于能夠建立設(shè)計約束，保證設(shè)計一致性；更重要的是能夠為產(chǎn)品/團隊規(guī)范設(shè)計輸出，提升設(shè)計效率。
組件庫的搭建需要因地制宜，根據(jù)產(chǎn)品或團隊需求去構(gòu)建，保持組件庫輕量高效是我們的目標(biāo)；一切能夠提升設(shè)計效率的可能性都應(yīng)該值得嘗試。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。