Figma作為一個(gè)線上協(xié)作設(shè)計(jì)平臺(tái)，因其強(qiáng)大的組件功能，越來(lái)越受到設(shè)計(jì)團(tuán)隊(duì)的青睞。

為幫助用戶對(duì)組件進(jìn)行更加高效的管理，2020年11月初，F(xiàn)igma在其網(wǎng)站上發(fā)布了組件的變體功能。

Figma官網(wǎng)：https://help.figma.com/hc/en-us

本文主要通過(guò)變體組件的創(chuàng)建過(guò)程，來(lái)向您介紹本次更新中值得關(guān)注的功能。

以下分為五個(gè)章節(jié)來(lái)敘述：

1.變體組件是什么

2.從零構(gòu)建變體組件

3.現(xiàn)有組件遷移

4.管理變體組件

5.代碼邏輯

以下內(nèi)容會(huì)按照構(gòu)建順序進(jìn)行拆解

變體組件是什么

1. 變體組件是什么？

變體組件是一種基于組件的狀態(tài)屬性。

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

變體組件能在創(chuàng)建組件和構(gòu)建設(shè)計(jì)系統(tǒng)時(shí)，幫助用戶統(tǒng)一管理組件的多種類型、尺寸、以及狀態(tài)；可以達(dá)到優(yōu)化設(shè)計(jì)層級(jí)的目的。

△ 多人協(xié)作使用變體組件快速且統(tǒng)一

3. 前后變化

使用變體組件前，單個(gè)組件的多種類型、狀態(tài)的管理相對(duì)紊亂，而創(chuàng)建變體組件后能夠通過(guò)資產(chǎn)面板快速選擇及切換。

演示：

Before

Figma發(fā)布組件變體之前，用戶要使用組件，得通過(guò)冗雜的資產(chǎn)列表去搜索組件；想要切換組件時(shí)需在右側(cè)屬性面板中翻找組件列表。

After

創(chuàng)建變體組件之后，簡(jiǎn)化了資產(chǎn)面板組件列表；用戶切換選擇組件在右側(cè)屬性面板中也進(jìn)行了分類。

從零構(gòu)建變體組件

1. 創(chuàng)建組件

組件是什么：組件是UI界面設(shè)計(jì)中復(fù)用性較高的對(duì)象，在Figma中組件（Component）是可以復(fù)用的任意對(duì)象，通過(guò)創(chuàng)建組件可以對(duì)該對(duì)象進(jìn)行統(tǒng)一管理。

組件詳情文章：

2. 示例：按鈕

簡(jiǎn)單的介紹一下按鈕組件的建立過(guò)程，后續(xù)我們會(huì)用到它來(lái)創(chuàng)建組件變體。

第一步：繪制按鈕組件

將圖標(biāo)/文字/矩形背景尺寸排列好

第二步：自動(dòng)布局

選擇圖標(biāo)和文字后，在右側(cè)點(diǎn)擊自動(dòng)布局

第三步：創(chuàng)建組件

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

以上3步是創(chuàng)建一個(gè)基礎(chǔ)按鈕組件的步驟，眾所周知，按鈕組件在設(shè)計(jì)系統(tǒng)中是一個(gè)擁有多種形態(tài)的組件。那么在創(chuàng)建變體組件之前，我們需要同時(shí)創(chuàng)建其他類型的按鈕組件。

3. 組件分類與命名規(guī)則

想要?jiǎng)?chuàng)建變體組件，我們盡可能的完善該組件的狀態(tài)、尺寸、以及組合形式，通過(guò)合理的分類排布能夠幫助我們更有效的創(chuàng)建。

例如：按鈕組件會(huì)有類型、尺寸及狀態(tài)的分類。

在給組件命名時(shí)，我們通常也會(huì)以分類的排序來(lái)進(jìn)行組件的命名。（例如：Type/類型下會(huì)有主要「primary」/次要「secondary」/幽靈「ghost」/虛線「dash」這四個(gè)具體名稱值;Size/尺寸下會(huì)有大尺寸「large」/中尺寸「medium」/小尺寸「samll」三種尺寸值；State/狀態(tài)下會(huì)有默認(rèn)「default」/懸?！竓over」/點(diǎn)按「press」/禁用「disable」四種狀態(tài)值。）

那么一個(gè)大尺寸正常狀態(tài)下的主要組件的命名為：Button/primary/large/default。

△ 按鈕組件分類展示

4. 創(chuàng)建變體組件

完成上面的組件創(chuàng)建及命名過(guò)程后，我們選擇所有按鈕組件創(chuàng)建變體組件。

第一步：整理并確保每一個(gè)都是組件狀態(tài)

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

第二步：命名

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

第三步：全選創(chuàng)建變體

選擇所有需要?jiǎng)?chuàng)建變體屬性的組件，點(diǎn)擊右側(cè)屬性面板中的創(chuàng)建變體按鈕。

第四步：創(chuàng)建后的狀態(tài)

當(dāng)組合創(chuàng)建變體屬性后，你就可以在右側(cè)屬性面板中看到變體的分類屬性和值。

△ 步驟詳細(xì)圖

5. 變體組件的屬性和值

變體組件的屬性和值 (Property&Value)是用來(lái)管理變體組件的主要參數(shù)，通過(guò)修改變體組件的屬性和值能夠合理管理組件的變體狀態(tài)。

屬性（Property）

屬性是變體組件的可變參數(shù)，相當(dāng)于一個(gè)變體組件的大分類。例如：按鈕組件可以分為「類型按鈕」「尺寸按鈕」以及「狀態(tài)按鈕」。

值（Value）

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

6. 使用變體組件

所有按鈕組件創(chuàng)建成變體組件后，我們可以在左側(cè)資產(chǎn)「Assets」中拖拽按鈕組件至中心畫板中，嘗試使用一下。

現(xiàn)有組件遷移

1. 整理現(xiàn)有組件

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

第一步：整理組件

將輸入框按照類型/尺寸/狀態(tài)/有無(wú)提示整理排列。當(dāng)然你也可以按照你所想的分類順序進(jìn)行組件分類。

第二步：檢查組件

檢查要?jiǎng)?chuàng)建組件變體的組件是否都為組件(?)，而不是實(shí)例(◇)。

第三步：批量命名

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

2. 輸入框組件

以AI Design為例，現(xiàn)有輸入框組件展示，在輸入框變體組件示例中將有無(wú)提示作為開(kāi)關(guān)屬性（True/False）。

△ AI Design System輸入框組件展示

3. 批量命名

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

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

第一種：統(tǒng)一前綴

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

第二種：批量部分命名

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

第三種：添加數(shù)字后綴

選擇圖層列表右鍵，點(diǎn)擊Number??，那么圖層命名則會(huì)從上往下按順序命名。

4. 創(chuàng)建變體組件

整理并檢查所有輸入框組件后，全選組件點(diǎn)擊「Combine as variants」創(chuàng)建變體組件。最后在右側(cè)屬性面板中查看輸入框組件變體。

5. 修復(fù)變體組件的沖突值

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

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

第一種：Master組件的復(fù)用導(dǎo)致沖突值

因直接復(fù)制組件，而未做任何改變創(chuàng)建成組件的變體組件，會(huì)出現(xiàn)沖突值問(wèn)題。

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

第二種：創(chuàng)建變體組件時(shí)未保證它屬性的唯一值而導(dǎo)致的沖突值

兩個(gè)變體組件的命名屬性和值創(chuàng)建成一樣也會(huì)導(dǎo)致沖突值問(wèn)題

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

管理變體組件

第一種/修改名稱

重命名屬性：?jiǎn)螕魧傩?，然后輸入更符合該屬性的描述名稱。

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

第二種/排序

重新排序?qū)傩裕哼x擇組件變體集，在右側(cè)屬性面板中，選擇屬性列表左邊，直至左側(cè)圖標(biāo)出現(xiàn)，拖動(dòng)排序。

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

第三種/刪除屬性

選擇組件集，將鼠標(biāo)懸停在右側(cè)屬性面板變體上，點(diǎn)擊「—」按鈕，即可刪除該屬性。

在刪除屬性前，請(qǐng)確保沒(méi)有任何變體使用它。

第四種/新增組件或?qū)傩?/p>

選擇該組件變體集，將鼠標(biāo)懸停在右側(cè)屬性面板變體上，點(diǎn)擊「···」按鈕，可選擇新增組件變體。

或者新增屬性。

代碼邏輯

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

在前端代碼邏輯中，常以「/」來(lái)進(jìn)行區(qū)分，F(xiàn)igma將這一想法同步化，默認(rèn)第一個(gè)「/」前的名稱為組件名稱，此后的每一個(gè)都是該組件的屬性分類；「/」之間以值的名稱來(lái)命名。

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

最后

快來(lái)創(chuàng)建你的變體組件吧！

AI Design在Figma更新變體功能第一時(shí)間進(jìn)行了變體組件轉(zhuǎn)換，F(xiàn)igma更新組件變體功能對(duì)組件庫(kù)資產(chǎn)的管理有巨大的改善，它的核心是用來(lái)高效管理多狀態(tài)屬性的組件。整篇文章從兩個(gè)方向介紹如何創(chuàng)建變體組件，無(wú)論是從零開(kāi)始創(chuàng)建變體組件還是現(xiàn)有組件庫(kù)遷移，創(chuàng)建過(guò)程的關(guān)鍵步驟在于分類命名。變體組件能夠從一定程度簡(jiǎn)化組件庫(kù)層級(jí)，也能解決實(shí)際應(yīng)用的效率問(wèn)題。

文章來(lái)自微信公眾號(hào)：AsiaInfo Design