即學即用！8個Figma組件和變體進階應用技巧

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

基礎教程：

一、組件嵌套

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

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

變體需要設定屬性（Property）和值（Values），使組件更接近前端代碼。現有組件轉化成變體，為了準確轉換，組件命名遵循結構：componentName/value1/value2，第一個/之前的文字將成為變體組件的名稱，其他/將創建一個新的屬性，然后將屬性作為一個值添加。

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

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

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

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

四、文字屬性（Text property）

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

操作方式：選擇組件內的文本，點擊創建文字屬性，填寫屬性名稱就可以了。

五、布爾屬性（Boolean property）

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

操作方式：選擇組件內的圖層，在圖層處選擇創建組件屬性，填寫屬性名稱和選擇開關值。

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

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

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

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

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

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

因此我進行了優化處理。

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

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

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

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

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

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

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

九、一些小技巧

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

總結

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

歡迎關注作者微信公眾號：「ALEI的設計思考」