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

第二期：

一、什么是組件？

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

1. 組件是可以在設計中重復使用的元素，它有助于創建和管理跨項目的一致設計，您可以從您設計的任何圖層或對象創建組件，這些可以是各種各樣的東西，例如按鈕、圖標、布局等等。
2. 組件有兩個方面：主組件定義了組件的屬性，而實例是您可以在設計中重復使用的組件的副本，實例與主組件相鏈接，并接收對組件所做的任何更新。

從這個定義可以看出，組件的本質其實就是解決設計的統一性，以及通過更換母組件就能讓所有的實例組件同步更新。想想一個設計文件中成百上千的元素，如果要保證完整統一的樣式及標準，如果沒有組件，幾乎很難實現。

二、組件的屬性

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

1. 變體屬性

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

變體是組件最重要的屬性，相比其他三個屬性，變體的使用頻率和應用場景也最多。
結合一個我們最常見的按鈕來做解讀。

一個按鈕，可以按類型分為主要、次要、虛框、線框按鈕，按形狀分為長方形、圓角、正方形和圓形，按尺寸分為大、標準和小，按狀態分為默認、懸停、聚焦、激活和禁用。

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

① 如何創建變體屬性？

在組件的的屬性面板右側點擊添加 Variant，輸入新增屬性的名稱，例如狀態、顏色、形狀，然后設置一個默認值，一個變體屬性就成功添加了。

② 如何創建多個復雜的變體屬性？

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

③ 變體可以應用在哪些場景？

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

AHA 卡

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

文本屬性

文本屬性是指組件內哪些文本內容可以更改，比如標題、輔助文字、作者信息等。

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

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

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

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

④ 如何創建文本屬性？

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

缺陷卡+1

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

⑤ 文本屬性可以應用在哪些場景？

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

布爾屬性

布爾屬性可以指示哪些圖層可以打開/關閉其圖層可見性，例如按鈕上的圖標，以及組件內的任何一個元素。

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

⑥ 如何創建布爾屬性？

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

缺陷卡+2

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

⑦ 布爾屬性可以應用在哪些場景？

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

實例交換屬性

實力交換屬性是指當你的組件存在多個嵌套的組件時，可以快速設置需要交換的首選實例。

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

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

⑧ 如何創建實例交換屬性？

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

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

⑨ 實例交換可以應用在哪些場景？

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

三、組件的分類

1. 單一屬性組件

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

2. 多屬性復雜組件

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

嵌套實例

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

創建方式

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

四、組件的應用案例

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

1. 按鈕的狀態

1. 類型：主要按鈕、線框按鈕；
2. 形狀：長方形、全圓角；
3. 尺寸：48px、36px；
4. 圖標：文本前后都需要；
5. 其他：輔助文字；

2. 多種屬性的嵌套組合

使用自動布局制作初始狀態按鈕，這一步需要考慮該按鈕所需要的元素，比如圖標、文本等;

創建組件，為各元素增加相應屬性，比如圖標需要增加布爾屬性和實例交換屬性，文本需要增加文本屬性等；

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

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

1. 無論任何元素，凡是可能在頁面中出現兩次以上，都應該設計成組件，這樣才能保證統一和高效。
2. 所有元素理論上都需要使用自動布局，這樣你的組件才會靈活高效。
3. 在設計初始狀態組件時候，需要把所有元素都設計進去，再賦予對應元素所需的組件屬性，比如圖標可以添加布爾屬性、文本可以添加文本屬性。
4. 當組件存在多個復雜的狀態，可以先把狀態都寫出來，然后進行分類，梳理清晰以后再進行設計。

總結

組件是 Figma 中非常重要的一個功能，就如前文所言，它的本質是解決了設計的一致性，讓一個龐大、復雜的設計文件可以保證元素的的統一和標準，而組件又可以獨立進行維護和更新，這對設計效率的提升有極大的保障。

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

歡迎關注作者微信公眾號：「設計大偵探」