讓團隊效率提高48%！我是如何有效構建Figma組件的？

身為設計師，每當打開 Figma 并準備將腦海中設計構思轉化為真實界面時，總是有一種特別的興奮感。但是，尤其是在面對緊迫的時限和高標準的時候，實際的設計過程有時真的非常費時費力。為了加速這一進程，你需要的是有效的時間管理、期望管理，與一套靈活且標準化的設計系統組件庫。

去年，我和我的團隊采用了 Figma 中的自動化布局（Auto-layout）和組件屬性（Component properties）等功能迭代翻新了我們的整個基于 Figma 的組件庫。結果在 2022 年下半年，我們部門 Figma 組件的總使用量增加了 200%以上。調查顯示認為這個組件庫“大大加快”了他們工作效率的設計師增長了 48%。因此，我想和所有熱愛 Figma 的你們分享一些關于構建組件的見解。

這篇文章主要分享我的思考過程，而不是技術細節。

更多組件設計干貨：

一、了解你的工具

開發理想的設計系統和組件庫（這是兩個并不完全相同的概念）常常讓人覺得是一個永無止境的任務，但接受這個挑戰也是其中的樂趣。對我個人來說，始終關注你正在使用的工具的最新功能更新并不斷從社區的其他設計師那里學習創新實踐是非常重要的。要充分發揮工具的潛力，就需要理解它的設計邏輯和內部運作。為了提高用戶體驗我們使用的工具本身也在不停進化，所以作為設計師保持成長心態，經常更新技能和作品，可以避免積壓任務。

如果你使用 Figma 作為你的設計工具，那理解三種常見的分組結構之間的區別：組（Group）、畫板（Frame）和自動化布局（Auto-layout），以及使用它們的最佳時機，對于構建響應性設計特別有幫助。為了達到所需的效果，組合不同分組類型也是有必要的。

1. 資源

以下精選文章提供了詳細的見解和清晰的示例，可幫助您掌握各種概念并熟練使用 Figma。

1. https://medium.com/ux-planet
2. https://medium.com/design-bootcamp
3. https://uxdesign.cc/absolute-positioning-in-figma-cc5cb0a299c6
4. https://medium.com/@joeyabanks

二、考慮你的目標用戶

當設計組件時，我們既是設計師也是用戶，這為我們提供了一個練習迭代設計過程的絕佳機會。從用戶的角度來看，組件應該強大到能適應各種用例。這意味著在標準化和專用性之間找到一個平衡是至關重要的。如果高度標準化，那設計師可能需要額外的時間調整組件到他們所需的形態；如果組件設計得太滿太高級，他們可能又需要刪減用不到的功能來適應更常見的使用需求。建議設計組件時從常見的形態出發，同時提供配置高級設置的選項。另外，不要忘記向你的設計同事征求反饋并不斷迭代。

1. “分離” 時刻

在使用 Figma 組件時，有一個關鍵且難以避免的時刻被稱為“分離”（Detach）。思考分離前后的使用場景和需求是至關重要的，這有助于你更好地構建某個組件的可配置性。

舉個例子，我設計的表格組件為用戶提供了多重嵌套的可配置性：

表格 > 列 > 單元格

人們傾向于更頻繁地分離外層而不是內層。如果你希望用戶在分離之前就做出某些選擇，你可以將它們放在外層。例如，我提取了如主題、行數和斑馬紋等高層級屬性到表格組件（與列組件相比，這是外層），因為用戶通常一開始設計就知道自己對這些高層級屬性的偏好并能立馬配置。在分離外層組件后，用戶仍然可以保持表格結構并進一步對列組件進行配置，同時對列進行靈活的重新排序。這實際上證明了我們是可以對這個“分離”時刻加以利用的。

表組件

如果你深入下一級到列組件，你會發現我加入了各種不同的列類型，如左/右文本、統計數據、復選框、操作等，這些通常涵蓋了大多數的使用場景。

可用的列類型

我將某些列的寬度設置為“填充容器”，這樣即使用戶刪除/隱藏或顯示某幾列，整個表格仍然能夠水平響應。

調整表格大小

在每一列內部，我廣泛應用了布爾值（Boolean）、文本（Text） 和 實例替換（Instance-swap）屬性。因此設計師能夠多選同類型的單元格，輕點幾次鼠標就可以進行批量更改。

2. “開槽”法

當我最初嘗試為圖標使用實例替換（Instance-swap）屬性時，我意外地發現了所謂的“開槽”法。如下所示，當你點擊顯示右側圖標（Right icon）時，你會看到一個圓形占位符圖標，并可以通過實例替換屬性將它替換成整個組件庫中的任何其他圖標。令人驚訝的是，你也可以將它替換成圖標以外的任何現有組件，只要組件的自動化布局外框設置為環抱內容（Hug）。這樣，通過合理地“開槽”，你可以將基本元素（如圖標、標簽、復選框、箭頭、開關、列內數據可視化等）和其他組件進行鑲嵌組合。而且，它允許用戶根據自己的具體需求自定義樣式，而無需依賴你去創建不同的變體（Variant）。

“開槽”法

三、專注于嘗試和糾錯，而非完美主義

隨著工具和設計行業的不斷變化，有時候“最佳實踐”其實尚未確立。

不要害怕完美——你永遠都無法達到它。- 薩爾瓦多·達利

所以，不要因為沒有遵循最佳實踐而擔憂；相反，擁抱探索和實驗。在靈感稀缺的日子里，簡單地打開 Figma 并在畫布上涂鴉，可能會帶來意想不到的發現并激發出絕妙的想法。

1. 優化組件結構

以下是我一年前在 Figma 組件屬性功能尚未推出時設計下拉菜單組件的故事。

在組件屬性發布之前，我正在探索下拉菜單的結構。根據需求和對應的前端控件，它應該具有以下屬性：

1. 選項文本
2. 描述文本
3. 5 個層級的樹結構層次
4. 復選框
5. 箭頭符號：上、下
6. 右側圖標
7. 狀態：默認、懸停

我簡單地排列組合列出了所有可能的變體，然后才意識到要創建一個包含所有這些屬性的組件，需要 240 種變體。考慮到日后進一步的維護，這似乎過于龐大。

應用組件屬性之前需要 240 個變體

所以組件屬性（Component properties）發布后，我立刻學習了如何使用它們，希望借此實現一個輕量級的結構。結果發現，如果正確應用布爾值和實例替換屬性，只需要 10 種變體即可變化出所有 240 個不同形態。

應用組件屬性后只需要 10 個變體

借助這些新知識，我成功地減小了組件的規模，并最終優化了整個庫，同時又增加了可配置性。這都離不開最初的看似毫無方向的思考和探索。而當我采用屬性簡化組件結構時，也為我后來添加到組件中的其他屬性創造了空間。

很快，下拉菜單組件在我們的團隊中變得非常受歡迎。通過下面的演示，看看你可以多快建立一個菜單。

下拉菜單組件

四、提供必要的文檔

最后但同樣重要一點，無論你的組件設計有多出色，你還是需要附上解釋文檔，來確保它們能夠有效被其他設計師使用。因為不同的人有不同的理解和使用工具的方式。確保有足夠的說明，并為您的組件和圖層提供清晰且可搜索的命名。必要時，也可以為團隊提供一個分步拆解的在線教學。

感謝您的閱讀，如果對英文原文感興趣，歡迎點擊查閱 https://bootcamp.uxdesign.cc 。上面提到的所有組件都在我的 Figma 社區個人主頁中 https://www.figma.com/@mingzhic 。