国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

與Axure一樣，F(xiàn)igma里面也有組件功能。而且Figma里面的組件更為重要，還會(huì)有對(duì)應(yīng)的屬性。這篇文章，我們看看作者是如何幫我們梳理的。

??哈啰，大家好，我是廖爾摩斯丨設(shè)計(jì)大偵探????♀?！今天向大家分享我最新整理的Figma知識(shí)卡片-技能卡-組件。這張卡片將會(huì)詳細(xì)講解Figma的組件，以及它的四大屬性、實(shí)操應(yīng)用以及使用原則，希望對(duì)你有所幫助！

一、什么是組件？

我們先來(lái)看Figma官方的定義。

• 組件是可以在設(shè)計(jì)中重復(fù)使用的元素，它有助于創(chuàng)建和管理跨項(xiàng)目的一致設(shè)計(jì)，您可以從您設(shè)計(jì)的任何圖層或?qū)ο髣?chuàng)建組件，這些可以是各種各樣的東西，例如按鈕、圖標(biāo)、布局等等。
• 組件有兩個(gè)方面：主組件定義了組件的屬性，而實(shí)例是您可以在設(shè)計(jì)中重復(fù)使用的組件的副本，實(shí)例與主組件相鏈接，并接收對(duì)組件所做的任何更新。

從這個(gè)定義可以看出，組件的本質(zhì)其實(shí)就是解決設(shè)計(jì)的統(tǒng)一性，以及通過(guò)更換母組件就能讓所有的實(shí)例組件同步更新。想想一個(gè)設(shè)計(jì)文件中成百上千的元素，如果要保證完整統(tǒng)一的樣式及標(biāo)準(zhǔn)，如果沒(méi)有組件，幾乎很難實(shí)現(xiàn)。

二、組件的屬性

組件有四大屬性，分別是變體屬性、文本屬性、布爾屬性和實(shí)例交換屬性。

1. 變體屬性

??變體可以定義組件的不同變化，例如其不同的狀態(tài)、大小或顏色等。

變體是組件最重要的屬性，相比其他三個(gè)屬性，變體的使用頻率和應(yīng)用場(chǎng)景也最多。

結(jié)合一個(gè)我們最常見(jiàn)的按鈕來(lái)做解讀。

一個(gè)按鈕，可以按類(lèi)型分為主要、次要、虛框、線框按鈕，按形狀分為長(zhǎng)方形、圓角、正方形和圓形，按尺寸分為大、標(biāo)準(zhǔn)和小，按狀態(tài)分為默認(rèn)、懸停、聚焦、激活和禁用。

這么多的按鈕狀態(tài)，如何實(shí)現(xiàn)它們可以高效切換呢，唯一的方法就是通過(guò)增加變體屬性來(lái)解決，這個(gè)案例我將會(huì)放在組件的應(yīng)用案例中做詳細(xì)講解。

2. 如何創(chuàng)建變體屬性？

在組件的的屬性面板右側(cè)點(diǎn)擊添加Variant，輸入新增屬性的名稱(chēng)，例如狀態(tài)、顏色、形狀，然后設(shè)置一個(gè)默認(rèn)值，一個(gè)變體屬性就成功添加了。

3. 如何創(chuàng)建多個(gè)復(fù)雜的變體屬性？

如果組件存在多個(gè)狀態(tài)的變體屬性，可以先把所有狀態(tài)寫(xiě)下來(lái)，然后進(jìn)行分類(lèi)，最后再添加變體屬性，這樣會(huì)極大提高操作效率，而不至于在組件內(nèi)反復(fù)去命名或者查找錯(cuò)誤。

4. 變體可以應(yīng)用在哪些場(chǎng)景？

當(dāng)一個(gè)元素存在多個(gè)狀態(tài)的情況，你就可以考慮使用變體，比如導(dǎo)航會(huì)有展開(kāi)和收縮，按鈕會(huì)有高亮和默認(rèn)，表單會(huì)有輸入和選擇等類(lèi)型，在這些場(chǎng)景中，為組件增加變體屬性是最高效的方法。

??AHA卡

當(dāng)你成功掌握變體的技巧以后，它對(duì)設(shè)計(jì)生產(chǎn)的效率實(shí)在太高效了，這也是我再也離不開(kāi)Figma的原因之一，它能讓用戶享受到Figma的AHA-Moment。

5. 文本屬性

??文本屬性是指組件內(nèi)哪些文本內(nèi)容可以更改，比如標(biāo)題、輔助文字、作者信息等。

和變體不同，文本屬性只能在組件內(nèi)的文字圖層添加，也即是如果一個(gè)組件不包含文字，那么這個(gè)組件就無(wú)法添加文本屬性。

我們舉一個(gè)卡片的案例來(lái)做解讀。

下面這張卡片，包含多個(gè)標(biāo)題、時(shí)間、參數(shù)等多個(gè)文本信息。如果我們沒(méi)有添加文本屬性，那就在組件實(shí)例中我們只能雙擊文字才能更換，而如果增加了文本屬性，我們?cè)趯傩悦姘宓挠覀?cè)，直接輸入文字，組件實(shí)例的信息就可以同步更新。

相比其他三個(gè)屬性，文本屬性的曝光度相對(duì)少見(jiàn)，使用頻率也相對(duì)較低。在我過(guò)去使用Figma的過(guò)程中也從未意識(shí)到組件可以增加文本屬性來(lái)控制整個(gè)組件的文本元素更新，不過(guò)一旦掌握，你將會(huì)發(fā)現(xiàn)它對(duì)團(tuán)隊(duì)協(xié)作來(lái)說(shuō)非常高效。

6. 如何創(chuàng)建文本屬性？

文本屬性的創(chuàng)建方式相對(duì)隱晦，如果你不花一點(diǎn)時(shí)間去研究，根本不知道如何添加。你必須在組件內(nèi)選中文本圖層，然后在右上角屬性面板點(diǎn)擊添加屬性才能生效。這個(gè)入口比較隱晦，希望閱讀完這篇文章，你能順利添加。

??缺陷卡+1

文本屬性的添加方式花了我好長(zhǎng)時(shí)間，沒(méi)有給與清晰的指導(dǎo)和幫助，這嚴(yán)重違背了尼爾森的幫助提示原則。

7. 文本屬性可以應(yīng)用在哪些場(chǎng)景？

凡是包含文本的組件，比如標(biāo)簽、卡片、表格這些元素，都可以添加文本屬性來(lái)控制整個(gè)組件的文本修改和更新。

8. 布爾屬性

??布爾屬性可以指示哪些圖層可以打開(kāi)/關(guān)閉其圖層可見(jiàn)性，例如按鈕上的圖標(biāo)，以及組件內(nèi)的任何一個(gè)元素。

大家先看下面的案例，當(dāng)這個(gè)列表增加了布爾屬性以后，右側(cè)就會(huì)出現(xiàn)多個(gè)開(kāi)關(guān)按鈕，點(diǎn)擊開(kāi)啟或關(guān)閉，對(duì)應(yīng)的元素就會(huì)同步展示或隱藏，這會(huì)讓你的組件顯得特別高效。想想過(guò)去你使用圖層隱藏來(lái)實(shí)現(xiàn)圖標(biāo)是否顯示的場(chǎng)景，你就會(huì)發(fā)現(xiàn)布爾屬性簡(jiǎn)直就是Figma送給我們最棒的禮物。

9. 如何創(chuàng)建布爾屬性？

和文本屬性一樣，布爾屬性需要選中組件內(nèi)的元素進(jìn)行添加，比如一個(gè)圖層，一個(gè)畫(huà)框，他們的區(qū)別在于布爾屬性需要在元素的外觀添加屬性。

??缺陷卡+2

布爾屬性的添加方式和其他屬性都不一樣，不僅入口難找，而且違背了用戶操作習(xí)慣，對(duì)于新手太不友好。

10. 布爾屬性可以應(yīng)用在哪些場(chǎng)景？

任何一個(gè)組件，如果它的子元素在不同的場(chǎng)景中存在展示或隱藏，你都可以為這個(gè)元素添加上布爾屬性，這樣你在使用這個(gè)組件實(shí)例的過(guò)程中就會(huì)特別方便。按鈕、卡片、列表、表格、輸入框等等都可以。

11. 實(shí)例交換屬性

??實(shí)力交換屬性是指當(dāng)你的組件存在多個(gè)嵌套的組件時(shí)，可以快速設(shè)置需要交換的首選實(shí)例。

從字面意思理解起來(lái)非常困難，所以我們需要借助一個(gè)真實(shí)的案例場(chǎng)景來(lái)講解。

你正在創(chuàng)建一個(gè)帶有圖標(biāo)的按鈕，這個(gè)時(shí)候你需要切換圖標(biāo)，如果你記不住圖標(biāo)的名字，你就需要從上百個(gè)圖標(biāo)庫(kù)中逐個(gè)去尋找。但如果你給圖標(biāo)增加了實(shí)例交換屬性，設(shè)定了可能需要替換的備用圖標(biāo)，比如箭頭圖標(biāo)的四個(gè)方向，這個(gè)時(shí)候你就能在組件實(shí)例的屬性面板中快速切換了。

12. 如何創(chuàng)建實(shí)例交換屬性？

實(shí)例交換屬性的前置條件是該元素是嵌套在母組件中的子組件，也就是元素必須是一個(gè)組件，才能增加實(shí)例交換屬性。在右上角屬性面板添加實(shí)例交換屬性后，就可以添加常用的替換組件。

這里還有一個(gè)細(xì)節(jié)，那就你添加的組件必須是母組件，而非其他組件的實(shí)例，否則無(wú)法添加。寫(xiě)到這里，我才突然理解Figma官方文檔中的一個(gè)提示，那就是不建議把圖標(biāo)合并為一個(gè)變體，而是獨(dú)立的組件，這正是為了做實(shí)例交換做準(zhǔn)備。

13. 實(shí)例交換可以應(yīng)用在哪些場(chǎng)景？

多用于圖標(biāo)的切換，其他元素其實(shí)也可以嘗試，比如圖片、輸入框等。

三、組件的分類(lèi)

1. 單一屬性組件

單一屬性組件，也即是組件沒(méi)有添加任何屬性，可以實(shí)現(xiàn)母組件和多個(gè)實(shí)例組件的同步更新，這種類(lèi)型的組件無(wú)論是創(chuàng)建還是使用都比較簡(jiǎn)單。

2. 多屬性復(fù)雜組件

多屬性組件，則是加入了各種復(fù)雜屬性的組件，比如我們最常見(jiàn)的變體，其實(shí)它只是組件的一個(gè)屬性，如果嵌套了多種元素狀態(tài)，它的創(chuàng)建邏輯就相對(duì)復(fù)雜很多，這部分我們將會(huì)在下面用案例做詳細(xì)講解。另外這里我們還需要講一個(gè)新的技能，也即是嵌套實(shí)例（Nested Instances）。

3. 嵌套實(shí)例

和變體、布爾屬性相比，嵌套實(shí)例只能算組件的一個(gè)高級(jí)特性，它允許設(shè)計(jì)師在一個(gè)組件內(nèi)部嵌套另一個(gè)組件的實(shí)例，這樣設(shè)計(jì)師就可以構(gòu)建復(fù)雜且高度復(fù)用的設(shè)計(jì)系統(tǒng)，使得組件之間能夠相互依賴并保持同步更新。

創(chuàng)建方式

在屬性面板右側(cè)點(diǎn)擊添加，如果該組件包含其他多屬性組件，底部就會(huì)顯示該組件可添加嵌套實(shí)例組件，點(diǎn)擊添加即可成功。

四、組件的應(yīng)用案例

接下來(lái)，我們通過(guò)一個(gè)按鈕組件案例來(lái)演示組件的應(yīng)用。

1. 按鈕的狀態(tài)

• 類(lèi)型：主要按鈕、線框按鈕；
• 形狀：長(zhǎng)方形、全圓角；
• 尺寸：48px、36px；
• 圖標(biāo)：文本前后都需要；
• 其他：輔助文字；

2. 多種屬性的嵌套組合

使用自動(dòng)布局制作初始狀態(tài)按鈕，這一步需要考慮該按鈕所需要的元素，比如圖標(biāo)、文本等；

創(chuàng)建組件，為各元素增加相應(yīng)屬性，比如圖標(biāo)需要增加布爾屬性和實(shí)例交換屬性，文本需要增加文本屬性等；

添加變體屬性，完善按鈕的全部狀態(tài)，制作完成。

五、組件的使用原則及技巧

• 無(wú)論任何元素，凡是可能在頁(yè)面中出現(xiàn)兩次以上，都應(yīng)該設(shè)計(jì)成組件，這樣才能保證統(tǒng)一和高效。
• 所有元素理論上都需要使用自動(dòng)布局，這樣你的組件才會(huì)靈活高效。
• 在設(shè)計(jì)初始狀態(tài)組件時(shí)候，需要把所有元素都設(shè)計(jì)進(jìn)去，再賦予對(duì)應(yīng)元素所需的組件屬性，比如圖標(biāo)可以添加布爾屬性、文本可以添加文本屬性。
• 當(dāng)組件存在多個(gè)復(fù)雜的狀態(tài)，可以先把狀態(tài)都寫(xiě)出來(lái)，然后進(jìn)行分類(lèi)，梳理清晰以后再進(jìn)行設(shè)計(jì)。

六、總結(jié)

組件是Figma中非常重要的一個(gè)功能，就如前文所言，它的本質(zhì)是解決了設(shè)計(jì)的一致性，讓一個(gè)龐大、復(fù)雜的設(shè)計(jì)文件可以保證元素的的統(tǒng)一和標(biāo)準(zhǔn)，而組件又可以獨(dú)立進(jìn)行維護(hù)和更新，這對(duì)設(shè)計(jì)效率的提升有極大的保障。

不過(guò)，對(duì)于組件的使用，除了熟能生巧之外，更需要對(duì)組件的四大屬性進(jìn)行深入的研究和實(shí)操，而這里的知識(shí)點(diǎn)其實(shí)相對(duì)較難，個(gè)人也在不斷研究學(xué)習(xí)中，希望后續(xù)能補(bǔ)充完善更多知識(shí)點(diǎn)！