最近在使用 Figma 搭建組件庫，期間也遇到了一些困難：如何搭建變體、如何精簡變體、搭建的組件如何更易用等，后面通過上網(wǎng)看視頻教程、拆解大廠設(shè)計系統(tǒng)組件結(jié)構(gòu)，再經(jīng)過自己的仔細琢磨與嘗試，總結(jié)了一些搭建組件和變體的方法技巧，其中包含一些隱藏功能，屬于進階版，目標是讓搭建過程更高效易懂、設(shè)計協(xié)作更易用。

一、組件嵌套

組件嵌套邏輯可以使用在按鈕組件上面，比如同一個尺寸不同樣式的按鈕，建立一個按鈕主組件，使用它的實例建立其他的按鈕主組件，等于其他的按鈕主組件相對第一個的按鈕主組件就是實例。所以當我們想要調(diào)整按鈕尺寸、圓角、字號，只需要對第一個按鈕主組件進行調(diào)整即可，其他實例主組件也會同步更新。

二、批量命名變體屬性和值

變體需要設(shè)定屬性（Property）和值（Values），使組件更接近前端代碼?，F(xiàn)有組件轉(zhuǎn)化成變體，為了準確轉(zhuǎn)換，組件命名遵循結(jié)構(gòu)：componentName/value1/value2，第一個/之前的文字將成為變體組件的名稱，其他/將創(chuàng)建一個新的屬性，然后將屬性作為一個值添加。

創(chuàng)建變體前，批量選中組件，按 command+r，可以對組件進行批量命名。注意，如果想在名稱后面接著命名，需要點擊[當前按鈕]，輸入框內(nèi)容會變成$&，這時輸入就可以了。

還有一種方式，先建立變體然后再新建屬性和值，批量選擇變體內(nèi)的組件選擇對應值，這樣的方式也比較高效。

三、交換實例屬性（Swap instance property）

操作方式：選擇組件內(nèi)的圖標實例，點擊應用實例交換屬性，填寫屬性名稱就可以了。

四、文字屬性（Text property）

創(chuàng)建一個具有命名值的文字屬性，就像代碼組件通常具有的那樣，例如：label="內(nèi)容文本"，更貼近開發(fā)邏輯。并且設(shè)計師更新組件中的文本，而無需深入到子圖層中。

操作方式：選擇組件內(nèi)的文本，點擊創(chuàng)建文字屬性，填寫屬性名稱就可以了。

五、布爾屬性（Boolean property）

布爾屬性允許在組件內(nèi)添加是否可見的元素，并在其屬性上有開關(guān)切換的值，無需制作其他變體，可以精簡組件數(shù)量，減少文件體積。比如按鈕樣式有圖標和無圖標，這時我們一個組件就可以搞定了。

操作方式：選擇組件內(nèi)的圖層，在圖層處選擇創(chuàng)建組件屬性，填寫屬性名稱和選擇開關(guān)值。

六、公開嵌套實例屬性（Nested instances property）

這個功能還在測試中，變體里的嵌套實例屬性，允許直接從屬性面板編輯它們，無需導航到嵌套實例圖層。比如標題欄組件，按布局可以分為：左側(cè)、標題、右側(cè)三個模塊，每個模塊都建立了不同的變體，然后集合在一個標題欄組件中，我們可以在組件屬性面板編輯所有模塊。

操作方式：首先要到設(shè)置-帳號里點擊對應功能的開關(guān)，這個功能才能正常使用。

選擇嵌套實例的變體，新建屬性- Nested instances(嵌套實例)，勾選對應的嵌套實例屬性，這樣我們就可以在變體的屬性面板選擇嵌套實例的屬性和值了。注意，嵌套的實例需要有可以切換的值，新建屬性面板才能看到 Nested instances 按鈕。

七、應用：搭建對話框組件

可以看下初期的對話框組件，類型樣式都是平鋪出來，通過屬性和值來建立變體，組件數(shù)量很多，文件冗雜，組合使用不是很靈活。

因此我進行了優(yōu)化處理。

首先，考慮到層級太多，根據(jù)使用場景分為兩類：基礎(chǔ)對話框、引導對話框。

接著按原子理論梳理了單個對話框的布局結(jié)構(gòu)，可以分為內(nèi)容層和操作層。內(nèi)容層元素拆解：文本（是否有副標題）、圖標（大、小尺寸）、配圖（是否有關(guān)閉 icon）、輸入框（是否顯示）、選擇器（是否顯示）；操作層元素拆解：文字按鈕（橫向/主按鈕、橫向主次按鈕、豎向/主次按鈕、豎向/主次次按鈕）、填充按鈕（主按鈕、主次按鈕）。

明確建立變體思路，配圖、輸入框、選擇器使用布爾屬性，文本、圖標、文字按鈕、填充按鈕建立組件，使用內(nèi)部屬性外置，之后進行實例組合，就達到了精簡組件的效果，都在一級屬性欄切換，更易用。

八、分割線可以用形狀或 frame 描邊

比如列表的下分割線，我們可以畫一個 1px 的矩形，再通過布爾屬性建立開關(guān)；好處就是實際使用時可以選擇隱藏或顯示分割線。

如果實際調(diào)用不需要隱藏分割線，那么，我們可以在 frame 的描邊，選擇下描邊 1px，跟隨 frame 屬性，減少圖層，避免冗雜。

分割線規(guī)范：移動端的設(shè)計稿如果是 1 倍圖，那么列表分割線應該是 0.5px，因為設(shè)備基本都是@2x 或@3x 的，開發(fā)寫的分割線代碼都是 1px，不會跟隨設(shè)備倍率變化的，0.5px 在 1 倍圖的設(shè)計稿上更符合實際預覽效果。像 iOS Design Guidelines 文件也是這樣處理。

九、一些小技巧

1. 主組件刪除了，復制的組件還在，選中復制的組件，在右側(cè)面板可以還原主組件的
2. 主組件不能變?yōu)?frame，實例才可以
3. 直接拖變體內(nèi)的組件出來，就是調(diào)用的變體實例
4. 避免組件平鋪冗雜，文件體積過大，善用布爾屬性或公開嵌套實例屬性
5. 變體屬性和值命名要易懂易理解，命名和元素要有結(jié)構(gòu)對應關(guān)系，有一定規(guī)律性，避免詞語過多太復雜
6. 先建立變體，然后對變體組件里的元素使用布爾屬性，元素屬性跟隨組件，可以外置于變體屬性。
7. 內(nèi)存出現(xiàn)使用警報的常駐提示，主要原因是組件圖層數(shù)量過多或者存在許多隱藏的組件；我們可以通過使用布爾屬性減少設(shè)計系統(tǒng)中所需的變體和層的數(shù)量，進而提高文件的內(nèi)存使用率。如果文件包含大量頁面或大量高分辨率圖像，也有可能會遇到性能或內(nèi)存問題。因此，組件庫的資產(chǎn)管理要有一定的規(guī)范化。
8. 團隊庫搭建好一份深淺模式變量庫，使用 figma 的插件「Appearance」可以一鍵變色，需要在插件點擊保存變量到云端，然后到設(shè)計文件上選擇畫板切換深淺模式即可，親測可用。

總結(jié)

以上就是近期使用 figma 搭建組件和變體的一些感悟，好用的組件和變體才能提高設(shè)計師的使用效率，當然需要前期搭建過程的規(guī)范性和統(tǒng)一性。如果大家有什么好的點子，也歡迎在下方評論交流。

作者：ALEI的設(shè)計思考