設(shè)計(jì)軟件Figma的‘變體組件’功能更新全面解讀
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)注的功能。
以下分為五個(gè)章節(jié)來敘述:
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)建變體組件后能夠通過資產(chǎn)面板快速選擇及切換。
演示:
Before
Figma發(fā)布組件變體之前,用戶要使用組件,得通過冗雜的資產(chǎn)列表去搜索組件;想要切換組件時(shí)需在右側(cè)屬性面板中翻找組件列表。
After
創(chuàng)建變體組件之后,簡化了資產(chǎn)面板組件列表;用戶切換選擇組件在右側(cè)屬性面板中也進(jìn)行了分類。
從零構(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)建組件變體。
第一步:繪制按鈕組件
將圖標(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。
△ 按鈕組件分類展示
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è)屬性面板中看到變體的分類屬性和值。
△ 步驟詳細(xì)圖
5. 變體組件的屬性和值
變體組件的屬性和值 (Property&Value)是用來管理變體組件的主要參數(shù),通過修改變體組件的屬性和值能夠合理管理組件的變體狀態(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)有組件
如果您已有組件庫,想要遷移組件到組件變體,那么您可以將組件按照您所想的分類方式進(jìn)行分類。
示例組件:輸入框組件
第一步:整理組件
將輸入框按照類型/尺寸/狀態(tài)/有無提示整理排列。當(dāng)然你也可以按照你所想的分類順序進(jìn)行組件分類。
第二步:檢查組件
檢查要?jiǎng)?chuàng)建組件變體的組件是否都為組件(?),而不是實(shí)例(◇)。
第三步:批量命名
在右側(cè)圖層列表中選擇需要重命名的組件,右鍵 。
2. 輸入框組件
以AI Design為例,現(xiàn)有輸入框組件展示,在輸入框變體組件示例中將有無提示作為開關(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ò)誤。
要解決此問題,您需要添加或更新受影響的變體組件的值,使它們具有唯一的值組合。
第一種: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è)變體組件的屬性唯一值性。
管理變體組件
第一種/修改名稱
重命名屬性:單擊屬性,然后輸入更符合該屬性的描述名稱。
重命名值:雙擊值并輸入新名稱。
第二種/排序
重新排序?qū)傩裕哼x擇組件變體集,在右側(cè)屬性面板中,選擇屬性列表左邊,直至左側(cè)圖標(biāo)出現(xiàn),拖動(dòng)排序。
重新排序值:直接選中值拖動(dòng)排序,但只可在其父集間排序,不可跨其父集。
第三種/刪除屬性
選擇組件集,將鼠標(biāo)懸停在右側(cè)屬性面板變體上,點(diǎn)擊「—」按鈕,即可刪除該屬性。
在刪除屬性前,請(qǐng)確保沒有任何變體使用它。
第四種/新增組件或?qū)傩?/p>
選擇該組件變體集,將鼠標(biāo)懸停在右側(cè)屬性面板變體上,點(diǎn)擊「···」按鈕,可選擇新增組件變體。
或者新增屬性。
代碼邏輯
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
最后
快來創(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)下載!