在 Figma 中構建和擴展設計系統：案例研究

確定如何為跨國公司構建設計系統意味著對每個組件和模式進行細緻的分類。 這是一項艱鉅的任務，既需要大局觀，又需要關注細節。 以下是一位設計系統團隊負責人如何完成它的。

當總部位於瑞士的控股公司 ABB 著手創建設計系統時，其目標是為數百種軟件產品整合一致的外觀和感覺，其中許多軟件產品為使工廠、礦山和其他工業場所保持運轉的機械系統提供動力. 對於一家在全球擁有近兩打業務部門和近 150,000 名員工的公司來說，這絕非易事。 對於擔任 ABB 10 人設計系統團隊的首席產品設計師的 Abdul Sial 來說，擴展組件和模式庫取決於保持開放性和透明度，並強調大量文檔。

設計系統設計師的角色

越來越多像 ABB 這樣的大公司擁有專門致力於創建和維護設計系統的團隊。 馬德里設計師亞歷杭德羅·貝拉斯科說：“設計系統允許一致性，在公平的時間內進入市場，並且不允許生產卡在沒有創造價值的定制上。” 或者，正如葡萄牙里斯本的設計師 Alexandre Brito 所解釋的那樣：“只要有很多人使用同一組工具，設計系統就會提供結構。 就像每個人都使用相同的語言一樣。”

如果傳統的風格指南涵蓋了設計基礎——例如字體和顏色——那麼設計系統的影響範圍就更廣了。 “設計系統是樣式指南、設計組件、設計模式、代碼組件以及最重要的文檔的組合，”Sial 說。 當他在 ABB 的設計系統上工作時，大約有 120 名設計師定期使用它。 這項工作代表了該系統的 4.8 版本，該團隊將其稱為“設計進化”。

設計系統設計師所扮演的角色與那些只關注單個產品的人不同。 “您可以鳥瞰公司正在使用的所有不同產品，”Sial 說。

在設計運營中工作還需要與整個公司的利益相關者進行溝通。 “設計系統設計師必須是社交的，” Velasco 說。 “設計系統設計師必須非常喜歡與組織內不同角色的人一起工作和交談。 他們必須能夠區分要包含哪些反饋，以便圍繞公司的需求構建設計系統。”

組件的生命週期

在 ABB 的設計系統上工作時，Sial 遵循一個總體理念：“文檔、文檔、文檔”。 對於 ABB 網站、移動屏幕或大型獨立屏幕上的每個可重複使用元素，Sial 都想展示他所謂的組件生命週期。 這意味著對所有組件和模式（麵包屑、標題、輸入或按鈕）進行大量記錄，僅舉幾例。 “它經歷了什麼旅程？ 做了哪些決定？ 這樣，我們並不總是重新創建所有內容。 在嘗試某事之前，您可以閱讀並看到有人已經對其進行了測試，”Sial 說。

根據他的經驗，這種哲學與典型的文檔方法背道而馳。 例如，在快節奏的產品開發世界中，文檔通常在項目結束時編寫或完全放棄。 但對於設計系統，Sial 說，文檔不僅僅是事後的想法。 “設計系統永遠不會完成； 它需要不斷改進，”他說。 “設計系統創建者和消費者希望了解思維過程和決策，以便不斷改進它。”

文檔對於像 ABB 這樣大的設計系統尤其重要。 “擁有如此龐大的團隊，你必須能夠擴大規模，”他說。 “我們如何確保加入團隊的每個人都可以快速訪問任何組件並了解它是如何開始的、如何編輯的以及他們使用的是什麼版本？”

尋找合適的工具

有許多工具可用於構建設計系統，包括 Figma、Sketch 和 Adob​​e XD。 Sial 嘗試了幾種，嘗試了設計和項目管理工具的混合，然後才選擇了 Figma，它為文檔提供了充足的空間。

Sial 和他的團隊決定每個組件都應該放在自己的文件中。 “大多數時候，您一次只處理一個組件。 如果將所有組件放在一個文件中，它會降低 Figma 的速度。 通過為每個組件提供自己的文件，它可以更快地打開，並且您可以在一個地方擁有整個歷史記錄和文檔，”他說。

設置層次結構

Sial 建立了 ABB 設計系統，以便每個組件和模式的文件具有相同的頁面。 下面的圖像詳細說明了每頁上的內容。

覆蓋

Sial 建議為每個組件設置一個簡單的封面。 在 Figma 中，這可以實現所有組件的縮略圖預覽，並有助於文件的可瀏覽性。 在 ABB 設置中，封面頁包括組件名稱及其所處的階段：設計、開發或發布。 當組件進行時，狀態可以很容易地更新。

庫存、用例和請求

此頁麵包含組件在公司數字產品中顯示的多種方式的示例。 例如，在文本字段組件的情況下，庫存頁面將顯示文本字段在 abb.com 上的外觀與它在 iPhone 上的外觀和在 Android 設備上的外觀。 “庫存使我們能夠清楚地了解已經存在的東西，”Sial 說。

此頁面還應顯示組件被錯誤使用的方式。 “這使您可以查看您的產品並查看對齊和未對齊的位置，”Sial 說。 他建議啟動設計系統項目的團隊從對已經存在的內容進行編目開始。 “從庫存開始，它將在您創建設計時為您提供指導，”他說。

參考文獻、最佳實踐和競爭分析

Sial 建議在每個組件文件中創建一個類似於視覺板的部分，展示其他公司如何設計類似的部件。 “與其他任何事情一樣，最佳實踐是進行競爭分析，看看其他人是如何做的，”他說。 “觀察其他產品，看看他們的學習成果。”

測試和數據

測試結果數據頁面匯總了與測試組件相關的所有數據，包括 A/B 測試的結果以及來自用戶和利益相關者的反饋。 簡而言之，Sial 說，“這是一個組件的全部故事。” 也許設計團隊在兩年前嘗試了一個新的變體，發現它不起作用？ “也許我們研究了這種變化，但出於某種原因我們放棄了它，”他說。 如果是這樣，這種歷史可以確保設計師不再嘗試，從而節省大量時間。

範圍

下一頁列出了組件的範圍，以便設計人員可以實現設計。 當他們到達範圍頁面時，Sial 說，“你有一個故事。 您了解所有產品的庫存。 你知道你需要構建什麼並且你知道需求。 現在是時候把它寫下來並做一個簡短的總結了。” 他補充說，創建範圍應該是與產品所有者、開發人員和設計師的協作過程。

版本

該組件的最終版本的圖像可在此處找到，最新的迭代固定在頂部。 其他設計師應該能夠對其進行審查和評論。

沙盒

沙盒使設計人員能夠直接在 Figma 中試驗組件或模式的不同迭代。 “它可能很混亂，而且沒有標準化，”Sial 說。 “這只是一個設計師可以自由地做任何事情的遊樂場。”

Figma 組件

該文件還包含 Figma 組件本身的頁面，這是一個在整個設計系統中很容易重複的 UI 元素。 設計人員可以對組件進行更改，並且該更改將在整個公司的該組件的所有實例中填充，從而保持一切一致。 該頁面將導出到 Figma 設計系統庫，任何個人設計師都可以將 Figma 組件拖放到他們的設計中。 如果設計系統團隊需要對組件進行更改，他們可以進行一次並在整個公司範圍內進行部署。

樣式規則

接下來，設計系統設計人員和開發人員創建樣式規則頁面，這是 Sial 說“在設計中不可見”的元素的一種包羅萬象的方式。 例如，當您向下滾動頁面時，組件將如何呈現？ 這也是設計系統團隊跟踪未解決的問題或問題的地方。 他說他對這個頁面變得如此完整感到驚訝：“起初，我們認為這個頁面並不那麼重要，但現在我們意識到我們大部分時間都花在這裡。”

交出

移交說明是開發人員編寫組件代碼的說明。 移交文檔從組件的解剖結構開始，然後包括其變體。

ABB 系統移交文件還包括設計令牌。 在 ABB 等大型設計系統中變得越來越流行，設計標記是關於 UI 元素的與平台無關的樣式信息，例如顏色、字體或字體大小。 使用設計令牌，設計師可以更改一個值——例如，指示號召性用語按鈕應該是橙色而不是藍色——並且該更改將填充到使用令牌的任何地方，無論是在網站、iOS、或安卓平台。

Sial 還創建了一個 Figma 代幣插件，以擴大設計師可以在 Figma 中創建的代幣範圍。 “Figma 支持顏色、排版、陰影和網格樣式，”他說。 該插件將為更多變量生成標記，例如不透明度和邊框寬度。 它還創建了標準化的命名約定，因此設計人員不必手動跟踪令牌名稱。 “插件彌合了開發人員和設計人員之間的鴻溝。 它允許兩者在設計的單一事實來源上工作； 如果一個人在一個地方進行了更改，那麼該更改會在設計和代碼中的任何地方生效，”他說。

Sial 強調，在他的系統中，開發人員在創建組件的過程中扮演著積極的角色。 “早期，當我們準備好向他們展示的東西時，我們會讓我們的開發人員參與進來，”他說。 “然後我們意識到這行不通，現在我們真的開始與他們進行啟動會議。”

文檔網頁

每個文件的最後一頁包含一個帶有最終設計的網頁，展示了組件作為成品的外觀。 “我們創建了一個頁面，顯示實時示例的外觀，以便用戶，在這種情況下是我們的設計師，可以看到它在一天結束時在真實網站上的外觀，”Sial 說。

合作是關鍵

設計系統設計師的角色是多方面的。 正如 Alejandro Velasco 所說，“設計一個設計系統涉及很多角色，如果我領導這個，我就是項目的粘合劑。”

這是一項艱鉅的任務，不一定適合所有公司。 例如，初創公司可能會更好地從一個開箱即用的系統開始，如穀歌材料設計或 IBM 碳設計系統，而不是投入大量資源來創建一個。 不過，這可能還不夠，Alexandre Brito 說：“一旦你有多個設計師一起工作，你就會開始意識到需要有人來製定更符合產品或你正在建立的品牌。”

建立一個設計系統需要工作和奉獻； 這也需要合作。 Sial 強調，在整個過程中讓所有利益相關者參與 ABB 系統的開發是一個優先事項。 “這真的是我整個團隊的迭代工作。 一切都是為了傾聽他們的意見，我們花時間徹底學習和測試並開發這種結構，”他說。

擁有一個包含大量文檔的結構，包括歷史和最佳實踐，是 Figma 設計系統的核心。 “這是成功的，因為人們可以在一個地方閱讀所有文檔，”Sial 說。 “他們可以看到一切，從用例到設計，再到移交和最終組件頁面。 人們可以看到一個組件的整個生命週期。”

您可以在此處完整瀏覽 Abdul Sial 的 Figma 文件：組件模板。

進一步閱讀 Toptal 設計博客：

• 一致性是關鍵——如何構建 Figma 設計系統
• 結構的力量——設計系統模型指南
• 了解設計系統和模式
• Figma 作為設計工具的力量
• 迷你教程——在整個設計過程中利用 Figma 的功能