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