設(shè)計(jì)軟件Figma的‘變體組件’功能更新全面解讀

Figma作為一個(gè)線上協(xié)作設(shè)計(jì)平臺(tái),因其強(qiáng)大的組件功能,越來越受到設(shè)計(jì)團(tuán)隊(duì)的青睞。本文主要通過變體組件的創(chuàng)建過程,來向您介紹本次更新中值得關(guān)注的功能。

Figma作為一個(gè)線上協(xié)作設(shè)計(jì)平臺(tái),因其強(qiáng)大的組件功能,越來越受到設(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

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

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

以下分為五個(gè)章節(jié)來敘述:

1.變體組件是什么

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

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

4.管理變體組件

5.代碼邏輯

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

變體組件是什么

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

1. 變體組件是什么?

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

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

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

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

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

3. 前后變化

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

演示:

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

Before

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

After

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

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

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

1. 創(chuàng)建組件

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

組件詳情文章:


2. 示例:按鈕

簡單的介紹一下按鈕組件的建立過程,后續(xù)我們會(huì)用到它來創(chuàng)建組件變體。

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

第一步:繪制按鈕組件

將圖標(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)、尺寸、以及組合形式,通過合理的分類排布能夠幫助我們更有效的創(chuàng)建。

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

在給組件命名時(shí),我們通常也會(huì)以分類的排序來進(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。

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

△ 按鈕組件分類展示

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

完成上面的組件創(chuàng)建及命名過程后,我們選擇所有按鈕組件創(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è)屬性面板中看到變體的分類屬性和值。

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

△ 步驟詳細(xì)圖

5. 變體組件的屬性和值

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

屬性(Property)

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

值(Value)

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

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

6. 使用變體組件

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

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

現(xiàn)有組件遷移

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

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

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

第一步:整理組件

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

第二步:檢查組件

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

第三步:批量命名

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

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

2. 輸入框組件

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

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

△ AI Design System輸入框組件展示

3. 批量命名

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

重命名文章: Layers(Figma官方文章)

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

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

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

第二種:批量部分命名

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

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

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

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

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

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

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

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

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

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

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

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

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

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

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

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

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

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

管理變體組件

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

第一種/修改名稱

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

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

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

第二種/排序

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

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

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

第三種/刪除屬性

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

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

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

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

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

或者新增屬性。

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

代碼邏輯

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

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

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

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

Figma重大功能更新!學(xué)會(huì)用「變體組件」讓設(shè)計(jì)效率翻一倍!

最后

快來創(chuàng)建你的變體組件吧!

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




文章來自微信公眾號(hào):AsiaInfo Design


每天更新,
全站高品質(zhì)素材免費(fèi)下載!