Figma作為一個線上協作設計平臺，因其強大的組件功能，越來越受到設計團隊的青睞。

為幫助用戶對組件進行更加高效的管理，2020年11月初，Figma在其網站上發布了組件的變體功能。

Figma官網：https://help.figma.com/hc/en-us

本文主要通過變體組件的創建過程，來向您介紹本次更新中值得關注的功能。

以下分為五個章節來敘述：

• 變體組件是什么
• 從零構建變體組件
• 現有組件遷移
• 管理變體組件
• 代碼邏輯

以下內容會按照構建順序進行拆解

變體組件是什么

1. 變體組件是什么？

變體組件是一種基于組件的狀態屬性。

2. 為什么需要變體組件？

變體組件能在創建組件和構建設計系統時，幫助用戶統一管理組件的多種類型、尺寸、以及狀態；可以達到優化設計層級的目的。

△ 多人協作使用變體組件快速且統一

3. 前后變化

使用變體組件前，單個組件的多種類型、狀態的管理相對紊亂，而創建變體組件后能夠通過資產面板快速選擇及切換。

演示：

Before

Figma發布組件變體之前，用戶要使用組件，得通過冗雜的資產列表去搜索組件；想要切換組件時需在右側屬性面板中翻找組件列表。

After

創建變體組件之后，簡化了資產面板組件列表；用戶切換選擇組件在右側屬性面板中也進行了分類。

從零構建變體組件

1. 創建組件

組件是什么：組件是UI界面設計中復用性較高的對象，在Figma中組件（Component）是可以復用的任意對象，通過創建組件可以對該對象進行統一管理。

組件詳情文章：

2. 示例：按鈕

簡單的介紹一下按鈕組件的建立過程，后續我們會用到它來創建組件變體。

第一步：繪制按鈕組件

將圖標/文字/矩形背景尺寸排列好

第二步：自動布局

選擇圖標和文字后，在右側點擊自動布局

第三步：創建組件

全選按鈕元素，右鍵「Create Component」按鈕，創建組件(?)

以上3步是創建一個基礎按鈕組件的步驟，眾所周知，按鈕組件在設計系統中是一個擁有多種形態的組件。那么在創建變體組件之前，我們需要同時創建其他類型的按鈕組件。

3. 組件分類與命名規則

想要創建變體組件，我們盡可能的完善該組件的狀態、尺寸、以及組合形式，通過合理的分類排布能夠幫助我們更有效的創建。

例如：按鈕組件會有類型、尺寸及狀態的分類。

在給組件命名時，我們通常也會以分類的排序來進行組件的命名。（例如：Type/類型下會有主要「primary」/次要「secondary」/幽靈「ghost」/虛線「dash」這四個具體名稱值;Size/尺寸下會有大尺寸「large」/中尺寸「medium」/小尺寸「samll」三種尺寸值；State/狀態下會有默認「default」/懸停「hover」/點按「press」/禁用「disable」四種狀態值。）

那么一個大尺寸正常狀態下的主要組件的命名為：Button/primary/large/default。

△ 按鈕組件分類展示

4. 創建變體組件

完成上面的組件創建及命名過程后，我們選擇所有按鈕組件創建變體組件。

第一步：整理并確保每一個都是組件狀態

將按鈕按照分類方式排列并檢查每一個是否都創建成組件(?)。

第二步：命名

每一個組件都有它自己唯一的名稱，雙擊圖層列表修改名稱；例如：Button/secondary/medium/default

第三步：全選創建變體

選擇所有需要創建變體屬性的組件，點擊右側屬性面板中的創建變體按鈕。

第四步：創建后的狀態

當組合創建變體屬性后，你就可以在右側屬性面板中看到變體的分類屬性和值。

△ 步驟詳細圖

4. 變體組件的屬性和值

變體組件的屬性和值 (Property&Value)是用來管理變體組件的主要參數，通過修改變體組件的屬性和值能夠合理管理組件的變體狀態。

屬性（Property）

屬性是變體組件的可變參數，相當于一個變體組件的大分類。例如：按鈕組件可以分為「類型按鈕」「尺寸按鈕」以及「狀態按鈕」。

值（Value）

值是每個變體組件屬性下的可選擇項。比如：在按鈕類型里分「主要/次要/幽靈/···」等。

5. 使用變體組件

所有按鈕組件創建成變體組件后，我們可以在左側資產「Assets」中拖拽按鈕組件至中心畫板中，嘗試使用一下。

現有組件遷移

1. 整理現有組件

如果您已有組件庫，想要遷移組件到組件變體，那么您可以將組件按照您所想的分類方式進行分類。
示例組件：輸入框組件

第一步：整理組件

將輸入框按照類型/尺寸/狀態/有無提示整理排列。當然你也可以按照你所想的分類順序進行組件分類。

第二步：檢查組件

檢查要創建組件變體的組件是否都為組件(?)，而不是實例(◇)。

第三步：批量命名

在右側圖層列表中選擇需要重命名的組件，右鍵 Rename。

2. 輸入框組件

以AI Design為例，現有輸入框組件展示，在輸入框變體組件示例中將有無提示作為開關屬性（True/False）。

△ AI Design System輸入框組件展示

3. 批量命名

批量命名能幫你快速添加前綴或者修改部分命名，提高創建組件變體的效率。

重命名文章：Rename Layers（Figma官方文章）

第一種：統一前綴

選中需要重命名的圖層，右鍵Rename快速重命名，在Rename輸入框中輸入前綴名稱，點擊Current name按鈕。

第二種：批量部分命名

選中需要重命名的圖層，右鍵Rename快速重命名，在Mactch輸入框中輸入要匹配的命名，在Rename to中輸入你想修改的名稱。

第三種：添加數字后綴

選擇圖層列表右鍵Rename，點擊Number??，那么圖層命名則會從上往下按順序命名。

4. 創建變體組件

整理并檢查所有輸入框組件后，全選組件點擊「Combine as variants」創建變體組件。最后在右側屬性面板中查看輸入框組件變體。

5. 修復變體組件的沖突值

修復帶有沖突值的錯誤變體組件，集中體現在某些變體組件使用了相同的屬性和值。如果任何變體組件具有完全相同的值組合，則Figma會告知您存在沖突。即使變體組件本身在外觀上有所不同，您也會看到此錯誤。

要解決此問題，您需要添加或更新受影響的變體組件的值，使它們具有唯一的值組合。

第一種：Master組件的復用導致沖突值

因直接復制組件，而未做任何改變創建成組件的變體組件，會出現沖突值問題。

解決方案：修改其中一個組件變體的樣式，保證每個組件變體樣式的特殊性。

第二種：創建變體組件時未保證它屬性的唯一值而導致的沖突值

兩個變體組件的命名屬性和值創建成一樣也會導致沖突值問題

解決方案：修改其中一個變體組件的命名，檢查并對比命名和變體組件是同一個，確保每個變體組件的屬性唯一值性。

管理變體組件

第一種/修改名稱

重命名屬性：單擊屬性，然后輸入更符合該屬性的描述名稱。

重命名值：雙擊值并輸入新名稱。

第二種/排序

重新排序屬性：選擇組件變體集，在右側屬性面板中，選擇屬性列表左邊，直至左側圖標出現，拖動排序。

重新排序值：直接選中值拖動排序，但只可在其父集間排序，不可跨其父集。

第三種/刪除屬性

選擇組件集，將鼠標懸停在右側屬性面板變體上，點擊「—」按鈕，即可刪除該屬性。

在刪除屬性前，請確保沒有任何變體使用它。

第四種/新增組件或屬性

選擇該組件變體集，將鼠標懸停在右側屬性面板變體上，點擊「···」按鈕，可選擇新增組件變體。

或者新增屬性。

代碼邏輯

1. 命名方式和斜杠「/」

在前端代碼邏輯中，常以「/」來進行區分，Figma將這一想法同步化，默認第一個「/」前的名稱為組件名稱，此后的每一個都是該組件的屬性分類；「/」之間以值的名稱來命名。

示例：componentname/property1:Type=volue:primary/property2:Size =value:large/property3:State =value:default

最后

快來創建你的變體組件吧！

AI Design在Figma更新變體功能第一時間進行了變體組件轉換，Figma更新組件變體功能對組件庫資產的管理有巨大的改善，它的核心是用來高效管理多狀態屬性的組件。整篇文章從兩個方向介紹如何創建變體組件，無論是從零開始創建變體組件還是現有組件庫遷移，創建過程的關鍵步驟在于分類命名。變體組件能夠從一定程度簡化組件庫層級，也能解決實際應用的效率問題。

歡迎關注作者微信公眾號：「AsiaInfo Design」