今天這篇從組件的使用邏輯、文件管理、變體功能、發布和共享4個方面，幫你掌握組件功能的具體應用。

上期回顧：

一、組件功能

1. 組件的使用邏輯

有了前面響應式和自動布局的認識，我們就要進入到組件功能的具體應用上了。

組件的創建，首先要選中對應的設計元素，可以是單個圖層，也可以是編組、自動布局層，然后點擊生成組件按鈕就可以創建出一個 “原始” 組件。

在即時設計中，這個組件叫 “引用組件”，從該組件復制、引用出來的副本叫做 “實例組件”。它們具有明確的從屬關系。

在這個關系中，引用組件是完全可編輯修改的，只要修改它就可以統一修改關聯的所有副本樣式。

但由引用組件創建出來的副本，卻不能任意編輯，我們不能修改它下級圖層的尺寸、位置、順序。但是，副本的編組大小、圖層色彩、文字內容往往會有很多特殊的調節需求，所以目前主流的 UI 軟件都支持了副本組件的尺寸修改、色彩編輯和文本內容編輯，讓組件的使用更靈活。

以上就是組件使用的最基本邏輯，更進一步，組件作為一個編組，所包含的下級圖層的邏輯都會被保留下來，例如樣式設置、響應式設置、自動布局邏輯。如果一個編組原本就已經創建好了這些規則，那么當它被創建成組件，不管是引用組件還是副本，都會繼承這些設置。

比如上一小節中的通知彈窗案例，設置好自動布局再創建成引用組件以后，生成的副本就可以靈活的進行調整和修改文本內容。

除了樣式、響應、自動布局外，組件也可以包含組件。我們前面說過，按原子核的結構來講，一個復雜的組件是由若干基礎元素和控件組合而成。比如上方這個案例，就由多個模塊、文本區域和按鈕組成。

如果我們提前將按鈕、圖標等創建成引用組件，那么最終整個大的編組再創建成引用組件也是沒有問題的，原來的組件格式并沒有被抹消。

但有個細節值得注意，就是一個引用組件下方包含的組件只能是 —— 副本。如果剛才我們將按鈕創建成引用組件，那么上級編組再創建的引用組件就會自動將這些按鈕轉換成副本，并在畫布周圍生成新的引用組件。

所以這個順序也預示了，組件的嵌套是由下而上的，我們需要先創建低級的引用組件，再用它的副本逐步去組合更復雜的引用組件。這在后面的章節會近一步做出說明。

2. 組件的文件管理

創建引用組件，除了在畫布中它的描邊色彩不一樣，圖層中的圖標改變了以外，還會出現在一個新的位置中 —— 組件管理面板。

任何創建的組件都會被生成到左側的組件欄目面板中，只要從那里拖拽就可以置入當前畫布中，方便我們調用和查看。

看起來雖然很簡單，但是需要我們管理的細節卻很多。首先就是這個列表是一個包含層級關系的樹樁結構目錄，是允許我們對組件的層級進行結構自定義的。

當我們創建一個引用組件的時候，如果它處于一個畫板中，那么創建后它會在組件面板中保留該組件的默認文件路徑：

頁面 Page / 畫板 Frame / 組件 Compoent

如果我們在不同頁面和不同畫板中創建引用組件，那么該面板的目錄一定是特別混亂無序的。所以為了創建出符合正常分類使用習慣的組件目錄，就要說動做出調整。

首先就是建議在項目文件中創建一個獨立的頁面 Page 用來存放引用組件，任何新增的引用組件我們都需要將它置入到該頁面中。且不要將引用組件直接置入到畫板中，這樣它就不會生產包含畫板的層級出來。

然后，我們就可以在文件命名中，使用正斜杠 Slash 符號 “/” 作為層級劃分依據。比如下面的案例，包含相同上級結構的組件會被聚合到一個目錄層級中：

1. 數據錄入/上傳/亮色/拖拽上傳
2. 數據錄入/上傳/亮色/上傳中
3. 數據錄入/上傳/亮色/上傳成功
4. 數據錄入/上傳/亮色/上傳失敗
5. 數據錄入/上傳/亮色/上傳成功懸停
6. 數據錄入/上傳/亮色/上傳失敗懸停

這種命名結構帶來的另一個好處，就是處于同一個目錄層級下的組件，在屬性面板中可以進行快速的切換。尤其是一些相近的組件要做替換不用再在樹樁列表中重新找一遍，直接通過下拉菜單替換即可。

使用命名方式來梳理組件列表，完成有邏輯性、清晰地組件目錄，可以極大地提升組件的利用率和效率。但命名必然不是一邊創建組件一邊憑感覺命名的，而是一開始就要在外部完成的，例如通過思維導圖的方式制定出結構大綱，才能保證最終效果符合預期。

3. 組件中的變體功能

組件的應用中，除了不同組件的引用外，過去最讓我們頭痛的就是同一個組件的不同狀態。比如一個簡單的按鈕，就包含非常多的類型，默認、懸浮、按壓、點過、禁用、讀取等等。

為了在項目中可以使用組件的不同狀態，就需要我們在命名上下功夫，比如：

1. 控件 / 基礎 / 按鈕-大 / 默
2. 控件 / 基礎 / 按鈕-大 / 懸浮
3. 控件 / 基礎 / 按鈕-大 / 點擊
4. 控件 / 基礎 / 按鈕-大 / 禁用

就是用前面提到的右側下拉菜單，來完成同一組件的不同狀態切換。理論上這么實現是沒有問題的，但在實踐過程中，不僅組件列表的數量要大大增加，且下拉菜單第一步只改狀態顯得非常局促……

所以，從 Figma 開始推出了變體 Variants 功能，來更好的應對同一組件不同狀態的高效應用。目前該功能已經在線上 UI 設計軟件中普及。

在即時設計中，只要創建了引用組件，那么選中它后右側就會有 “變體” 一欄，點擊它就可以針對該組件創建出變體效果。

變體中原來的組件一分為二，并不是完全生成出一個全新的組件，而是在這個組件的概念下創建了一個新的狀態出來，在組件列表面板中沒有生成任何新的內容。

但是當我們再添加一個該組件的副本以后，就會發現它的右側多了一個條目和下拉菜單，通過這個下拉菜單就可以切換剛才變體內的不同組件。

比如我們在變體內選中兩個組件，在右側變體的下拉菜單中可以點擊修改命名，將它們分別改成 “默認” 和 “選中”，再修改對應的樣式。然后再應用同一個副本，就可以看見下拉菜單的內容也替換成了“默認” 和 “選中”，通過選擇不同的文字，就可以切換成對應的組件樣式。

這個功能可以很方便的切換組件的不同狀態，但如果它僅僅支持到這一步，那確實和使用命名編組的方法沒有本質區別。真正讓變體產生價值的，就在于同一組件的多屬性、多狀態支持。

還用按鈕舉例，比如一個按鈕包含 3 種樣式：純文字、純圖標、圖文件和，再包含 3 種狀態：默認、懸浮、點擊，還有淺色和深色模式……

也就意味著，按鈕包含樣式、狀態、色彩三種屬性，每個屬性中的值可以相互結合，那么總共就要設計出 18 個對應的按鈕出來。

如果我們使用變體每個樣式命名一個名字，那么下拉菜單有 12 個選項選起來也是很頭疼的。所以，變體允許我們自定義組件屬性和值，幫助我們更好的歸類和選擇組件樣式。

所以，在變體面板中，我們可以在更多選項中選擇添加分類就添加對應的屬性內容，添加出 3 個分類后，通過雙擊修改它們的名字為 ”樣式“、”狀態“、”色彩“。

有了屬性，變體下方的組件命名就會根本變更。如下圖所示，默認一次顯示屬性值，雙擊則可以查看對應的屬性名和值。

即變體的基本命名語法為 —— 屬性1 = 對應類型, 屬性2 = 對應類型, 屬性3 = 對應類型。

我們就可以通過這種語法方式完成對上方按鈕的統一命名，如：

1. 樣式 = 圖標, 狀態 = 默認, 色彩 = 淺色
2. 樣式 = 圖標, 狀態 = 懸浮, 色彩 = 淺色
3. 樣式 = 圖標, 狀態 = 點擊, 色彩 = 淺色
4. 樣式 = 文字, 狀態 = 默認, 色彩 = 淺色
5. 樣式 = 文字, 狀態 = 懸浮, 色彩 = 淺色
6. ……

然后，將這些組件統一添加到同一個變體下，之后創建的副本，就可以在右側變體面板中進行多維度的選項操作了。

具體的變體設置，分類、值的設置，可以自己在軟件中摸索，我就不演示了。這里再額外提一個功能，就是對值的設置上，還可以應用 “布爾” 的規則，即選項中只包含 “是” 或 ’否“。

如果我們在色彩的值中只使用 ”是，否“、”yes，no“、”開，關“ 等反義詞，那么副本變體選項中就會啟用開關按鈕，來替代原本的下拉菜單，提升操作的效率。

變體的使用可以很好的減少組件面板中組件的數量，提升組件狀態切換的效率。如果一個組件創建變態后被嵌套在另一個組件之下，那么這個復合組件也可以快速修改下級組件的變體類型。

雖然變體功能看起來非常強大，但它并不能適用所有場景，因為修改起來影響的要素過多。它更適用于基礎的控件和組件類型。如果針對復雜組件，尤其是包含多層組件嵌套的場景，往往使用命名的方式會比使用變體更有效率，這就需要大家自己在項目中積累經驗做判斷。

4. 組件的發布和共享

通過前面的功能，就可以完成組件庫的對應設置了，你可以在這個項目文件中調用這些組件完成項目。

但實際項目中，組件庫的使用可不能被局限在一個項目文件里，我們往往會創建很多個項目文件，來設計不同的流程、版本、模塊。于是，這些不同的文件都需要調用同一個樣式和組件庫。

所以，要讓包含規范的文件能被其它文件引用，就需要我們在組件面板中，點擊設計庫按鈕，在彈窗中點擊 ”發布“，將它創建成一個設計資源庫。這樣，我們在別的文件中再次打開這個面板，就可以看到這個資源的開關，點擊開關后，該文件就能調用里面的樣式和組件了。

在項目中，需要先新建團隊并邀請相關成員，然后再創建設計資源庫，那么其他設計師才可以引用該資源來完成相關頁面的設計。

至于每次原文件更新并落實到引用的其它文件這些細節操作，就需要大家自己去實踐了。

結尾

今天的分享就到這邊結束，前面幾篇就是軟件相關功能的完整介紹了。只有完全搞明白這些功能的應用方法，我們才可以真正在項目中進行設計規范的落地和實踐。

歡迎關注作者的微信公眾號：「超人的電話亭」