一致性是關鍵——如何構建 Figma 設計系統

設計師都知道，一個好的設計系統會對我們交付的產品質量和我們開發產品的速度產生巨大影響。 由於創建一個全面的設計系統的案例已經多次明確，谷歌、GitHub、IBM 等公司使用它們以更快的速度創造更好的產品，問題已經從“我們為什麼要設計系統？” 到“我們如何才能創建一個偉大的設計系統？”

那麼究竟什麼是設計系統？ Will Fanguy 將其定義為“一組可重複使用的組件，以明確的標準為指導，可以組裝以構建任意數量的應用程序。” 設計系統可能不僅包括 UI 組件庫和模式庫，還包括樣式指南、最佳實踐、代碼等。 就像建築師的建築藍圖一樣，設計系統也是產品團隊在構建產品時的“單一事實來源”，並有助於保持一致性。

GitHub 甚至分享了他們的 Figma 組件庫——基於 Figma 的設計系統的一個很好的例子。 更廣泛的工具，如 Storybook 和組件驅動開發，對於實現和記錄設計系統也是非常有用的資源。

設計系統保持設計的一致性，並且應該對參與創建產品的每個人都有用。 它是一個工具包，可幫助設計師更快地創建新屏幕、流程和原型。 一個好的設計系統可以幫助開發人員理解設計決策背後的邏輯，並有助於創建更具凝聚力的產品。 它加快了設計過程，讓設計師有更多的時間進行實驗。

對於那些使用 Figma 的設計師，讓我們看看在 Figma 中創建組件庫如何成為綜合設計系統的關鍵部分。

組件庫的強大功能

有時，過早投資創建設計系統可能會適得其反。 在設計產品的早期階段，這個過程仍然是流動的。 例如，如果正在試驗兩個主要導航欄，將兩者都添加到組件庫中是沒有意義的，因為這會使團隊中的每個人都感到困惑。 最好等到產品設計已經確定——最好是經過測試並最終確定。

如果一個產品是成熟的並且沒有現有的組件庫，那麼設計系統應該已經由當前的實現確定。 但它還沒有編纂。 此時，定義常見的 UX 模式並將產品提煉成一組在整個產品中經常使用的組件將是有利的。 此外，如果組件庫保存在所有人都可以輕鬆訪問的中央位置，那將是理想的選擇。

設計系統主要是一個工具包

嘗試使用像工具包這樣的設計系統是對其有效性的一個很好的試金石。 如果多個設計師經常使用它來加快他們的流程，那麼它做得很好。 如果開發人員可以在顏色、字體樣式方面參考它，或者在設計人員投入較少的情況下進行工作，這也是一個好兆頭。

包含高度複雜的組件或在產品中只能使用一次或兩次的組件通常沒有用處。 越是可重用的東西，它就越屬於設計系統。

Figma 最近為組織發布了設計系統分析，團隊可以在其中看到設計系統的不同部分的有效性並幫助優化它。

為什麼 Figma 非常適合創建組件庫

Figma 是一個強大的設計工具，具有許多強大的功能，但在設計複雜產品時，有一部分元素變得特別有用：樣式、組件和庫文件。 這些功能有助於使設計系統保持最新，有助於保持設計之間的一致性，並提供從中心位置更新多個設計的快捷方式。

• 樣式是在一個地方定義的顏色和字體樣式（字體、大小、粗細等），可以應用於許多對象。
• 組件是按鈕或聊天氣泡之類的東西，可以由樣式、形狀和文本等對像以及其他組件構建。
• 庫文件允許在多個文件之間以及與團隊或組織共享樣式和組件。

Figma 的核心是協作和共享。 任何人都可以在瀏覽器中編輯設計文件，自由共享，並且可以實時更新，因為多個用戶可以同時編輯它們。 這打開了設計系統，不僅可以在設計師之間進行更有效的協作，還可以與開發人員和其他利益相關者進行更有效的協作。

創建庫文件

在 Figma 中，可以創建一個或多或少用作設計系統開始的庫文件。 在這裡，我們可以定義樣式和組件，然後在整個團隊或組織中共享並在多個設計中使用。 樣式和組件可以在一個地方更新，然後這些更改可以自動引入所有單獨的設計文件。

這有幾個關鍵優勢：

1. 速度。 它消除了設計師手動更新可能數百個設計的需要，從而節省了時間。 通過在單個庫文件中管理組件，只需單擊幾下，在一個位置更新顏色即可在使用組件庫創建的每個設計中傳播。
2. 一致性。 它通過自動化任務來減少出錯的可能性。

組織

在 Figma 中構建設計系統時，在工具和理論之間進行比較是很有用的。 例如，Figma 中的 Styles 可以被認為是最基本的層次，甚至比 Brad Frost 的 Atomic Design 模型中的 Atoms 更基礎。 這些諸如顏色和字體之類的東西有助於構成產品的美感。

一個簡單的 Figma 組件將被視為原子設計模型中的一個原子，例如一個按鈕。 一個更複雜的 Figma 組件將被視為一個分子或有機體，然後用於構建模板和頁面。

組件庫中一些最有用的東西是：

• 顏色
• 字體
• 品牌資產、標誌等
• 導航
• 鈕扣
• 通知
• 模態
• 表單元素和驗證

在 Figma 中構建設計系統 - 入門

在此示例中，我們將創建一個簡單的登錄表單並解釋可以推斷和使用的組件和样式。

首先，讓我們考慮一下可能從此表單中可重用的組件和样式。 有一張包含徽標、表單域和按鈕的卡片。 還有三種字體樣式和一些可能有用的不同顏色和效果。

如上所述在庫中確定要包含的樣式和組件後，就可以創建庫文件並開始填充它了。

創建 Figma 庫文件

創建一個新文件並將其作為庫發布。 創建新文件後，單擊Assets選項卡，單擊Library圖標，然後單擊Publish 。 這會在庫文件中發布樣式和組件，以便它們可以在其他文件中使用。

現在可以在庫文件中創建樣式和組件，並且可以在其他文件中使用並從中央庫文件進行更新。

如何創建 Figma 樣式

在庫文件中創建樣式與在任何其他文件中創建樣式相同，如下面的步驟所述。

• 選擇要從中創建樣式的對象。 樣式可以是顏色、文本屬性、效果和佈局網格。
• 單擊要在新樣式中使用的屬性旁邊的樣式按鈕（正方形中的四個點），然後單擊彈出窗口中的加號按鈕以創建新樣式。

• 這將顯示一個命名樣式的模式。 使用語義名稱而不是表示名稱通常很有幫助，例如，“Primary Color”而不是“Green”，這樣可以更清楚地使用 Style 的用途。
• 使用屏幕右下角出現的彈出窗口將樣式發佈到您的團隊庫，或重複最初發布庫所採取的步驟。

這是 Figma 關於如何創建樣式的教程。

如何創建 Figma 組件

創建組件也很容易。 只需選擇要從中創建組件的對象，然後右鍵單擊並選擇“創建組件”。

組件以與樣式相同的方式發佈到團隊庫。

這是 Figma 關於如何創建組件的教程。

一旦創建了一些樣式和組件，就可以與團隊共享庫文件，並且可以在任意數量的文件中使用樣式和組件。

使用 Figma 庫

要在另一個文件中使用這些樣式和組件，庫文件需要鏈接到我們想要在其中使用新樣式和組件的現有設計文件。只需再次打開庫模式（資產，庫圖標）並打開切換開關用於要使用的庫文件。

組件庫現在可以使用了。 可以通過從屏幕左側的 Assets 選項卡將組件拖到設計文件中來放置組件。 在更改文本樣式、填充顏色、筆觸、效果和佈局網格時，可以以與本地樣式相同的方式使用庫樣式。

當組件和样式在庫中更新時，使用它們的文件需要接受更改。 Figma 將在庫文件中進行更新時顯示通知，並提供發布它們的選項。 發布後，任何使用組件和样式的文件都必須通過類似的通知或資產選項卡接受更改，以更新其組件和样式。 這可以防止意外發布和更新更改。

超越在 Figma 中構建組件庫

Figma 僅涵蓋成熟設計系統的組件庫部分。 對於一個完整的設計系統，值得考慮可以合併的其他部分，例如品牌指南、內容樣式指南和開發人員文檔。

Mailchimp 的內容風格指南就是一個很好的例子，它通過內容詳細說明了語氣和品牌。 GitHub 有一些關於他們的組件庫如何在代碼中工作的很好的文檔，Google 的 Material Design System 也有一些很好的例子來記錄設計系統背後的邏輯。

Figma作為一個設計工具已經成熟了很多，新的功能也在不斷的增加。 添加可供整個組織訪問的具有內置分析功能的 Figma 設計系統是向前邁出的一大步。 這些功能的添加表明 Figma 旨在成為一個成熟、全面的設計工具，並且正在朝著實現這一目標邁進。

• • •

進一步閱讀 Toptal 設計博客：

• Figma 作為設計工具的力量
• 使用 Figma 簡化協作設計
• 迷你教程——在整個設計過程中利用 Figma 的功能
• 迷你教程 - 使用 Figma 按鈕組件
• 使用這些頂級 UX 工具掌握您的工藝