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

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

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

一、什么是組件？

我們先來看Figma官方的定義。

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

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

二、組件的屬性

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

1. 變體屬性

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

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

結(jié)合一個我們最常見的按鈕來做解讀。

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

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

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

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

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

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

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

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

??AHA卡

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

5. 文本屬性

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

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

我們舉一個卡片的案例來做解讀。

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

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

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

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

??缺陷卡+1

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

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

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

8. 布爾屬性

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

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

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

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

??缺陷卡+2

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

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

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

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

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

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

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

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

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

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

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

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

三、組件的分類

1. 單一屬性組件

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

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

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

3. 嵌套實(shí)例

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

創(chuàng)建方式

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

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

接下來，我們通過一個按鈕組件案例來演示組件的應(yīng)用。

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

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

2. 多種屬性的嵌套組合

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

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

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

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

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

六、總結(jié)

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

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