關於設計系統，無人告訴我的 10 件事
source : https://medium.com/@janverardian/10-things-no-one-told-me-about-design-systems-803ab778193e by 詹弗阿迪安薩加拉
我對設計系統的入門就像被吸進了黑洞。
這件事發生在我在一家貨運軟體公司擔任產品設計師時。我們呈指數級增長，因此我們的 UI 庫需要關鍵的增強才能滿足業務需求。當我進行審核以確定要優化的內容時，我了解到 Figma 已經發布了自動佈局功能。我將這個新功能應用到我們的庫中，但任務變得更加複雜。我並沒有止步於審計；我最終創建了一個完整的設計系統。在那個專案中，我身兼數職：建立組件、進行研究、創建文件以及培訓我的設計同行如何使用我們的新設計系統並為其做出貢獻。
我創建的第一個設計系統是為了解決設計和開發之間缺乏一致性的需求而誕生的。經過對設計系統世界的深入探索以及在其他公司的經歷，我學到了很多我希望有人一開始就告訴我的東西。
文章正文插圖由Aura de Papel繪製。
1. 設計系統和UI函式庫不一樣
當 Figma 發布他們的自動佈局時，它改變了設計師建立組件的方式。我進行了審核以確定可以使用此新功能重建哪些元素。我發現設計與生產中的產品之間存在大量組件差異。開發人員和產品設計師可以存取所有組件，但他們沒有任何關於何時或如何使用它們的指南。我沒想到更新一些組件的最初任務會變成一個大項目，但它確實做到了。我不僅將自動佈局應用於某些組件，而且還必須建立文件以增加產品的一致性。 UI 函式庫成為一個設計系統。透過這個，我了解到UI庫是元件和樣式的集合，而設計系統是管理元件和樣式集合的一組指南。
2. 將您的設計系統產品化，您的用戶將會感謝您！
軟體產品解決使用者的問題並滿足特定的業務需求。建立有效產品的第一步是識別使用者、他們的工作流程和痛點。您的設計系統也是如此。
當您建立設計系統時，您正在為兩組使用者進行設計。首先，您正在為最終用戶進行構建，他們將成為您公司最終產品的客戶。但您也在為產品設計師進行設計，他們建立這些服務並依靠設計系統來創建有效的產品。當您將設計系統視為產品時，採用它的產品設計師可以專注於如何為最終用戶創建流暢的用戶體驗導航，而不是花時間選擇最合適的按鈕顏色之類的事情。然後，開發人員可以輕鬆取得現成的組件並進行組裝。設計系統的主要目標是優化使用者的工作流程並節省時間。設計系統只是用來建構產品的產品。
3. 設計師和開發人員應該像原子一樣：密不可分
與設計師類似，開發人員在使用設計系統中的現成元件建構產品時可以加快工作流程。真正的挑戰是保持這兩個團隊之間的一致性。
最終用戶不與設計工具（如 Figma、Zeplin、Invision 或 Sketch）交互，但他們與生產中的產品互動。他們可以判斷幕後何時出現脫節，特別是如果脫節源自設計系統。功能一致性也很重要。最終用戶希望預測組件的行為方式。如果組件的行為不符合預期，使用者可能會感到沮喪，並且我們可能會失去他們的信任。開發人員和設計人員必須在設計系統的各個階段共同努力以保持一致性。我了解到協作是成功設計系統的唯一秘訣。
4.花俏的命名約定並不總是實用
當我第一次創建設計系統時，我為自己出色的調色板規模感到非常自豪。我開發了最酷的顏色風格名稱；牛仔布、青年布、孔雀石和硃砂。我認為它會足夠靈活，但後來我們的車隊管理產品需要黑暗模式。我們面臨的第一個問題是所有組件中每種顏色的使用缺乏標準化。設計師和開發人員不知道何時使用哪種顏色。有些邊框是灰色的，有些是藍色的。在深色主題上分配相同的顏色對沒有幫助。
我們透過根據上下文無關的使用來命名顏色標記來解決這個問題，這簡化了將主題引入設計系統的過程。有多種方法可以標記顏色值。每個公司都使用自己的結構。體位法使用【情-聖-顯-互動】； Material Design 建議[設計-系統-類型-目的]。我的建議是研究並應用最合適的語義或全局命名，以適應您當前和未來設計系統的需求。
5. 原子設計幫助你記住基礎知識的魔力
在開始我們的設計系統的第一個版本之前，我研究了建立基礎的最佳實踐。我發現了一種創建模組化系統的特殊方法，稱為“原子設計”，由 Brad Frost 創建。它強調如何將組件分解為獨立的較小組件，以便在不破壞組件結構的情況下替換、修改或與其他較小部件交換。遵循這種方法使我們能夠更快地組裝設計並自動更新多個設計中的組件。這改變了遊戲規則！我建議將其應用於任何設計系統。
6. 協作促進精細化，從而支持業務目標
設計系統團隊不應與其主要使用者隔離。設計系統和使用它的產品團隊之間的互動不是單向的。設計系統隨著產品的發展而成熟。但如果公司呈指數級增長，來自多個團隊的報告和請求可能會變得難以承受。
向跨職能貢獻者開放設計系統並授權他們滿足自己的請求是滿足業務需求的最佳策略。主要擔憂之一可能是重大變化。設定貢獻流程以確保一致性。為貢獻者提供指南和材料，使他們對整個過程感到舒適和自信。跨職能協作提供了新的視角，促進設計系統的發展並推動業務目標。
7. 持久的設計系統需要產品和開發以外的協作
說到最後一點，大公司將其設計系統視為品牌和產品願景的核心。這些指南不僅影響軟體產品，而且還建立了整體的品牌體驗。設計系統團隊應該回應利害關係人和主要使用者的持續回饋。產品團隊、行銷、品牌、客戶體驗、經理和設計系統團隊之間的協作推動了我們設計系統的發展。此外，當你成為某事物的一部分並且更熟悉它時，採用它會更容易。列出利害關係人並確定設計系統如何優化其工作流程是為客戶提供一致體驗的最佳策略。
8.收養是最具挑戰性的部分
在採用階段有多種考慮因素。為了找到堅實的基礎，為相關團隊創建培訓材料是一個很好的策略。這些可以是影片、遊樂場、研討會、課程或您能想到的任何其他管道的形式。分發過程取決於您的公司及其能力。最終目標是讓人們認識到採用設計系統的優勢。如果您的利害關係人不了解如何將設計系統引入他們的工作流程，他們就不會使用它，這可能會破壞最終用戶的一致體驗。如果您的利害關係人介紹了設計系統，但不了解如何持續應用其更新，他們會找到一種方法讓它為他們工作 — — 即使這意味著分離組件或在沒有設計系統指南的情況下工作。
9. 無障礙是必須的
獲得通訊技術和平等機會是人權，而無障礙是每個團隊都應該從任何設計系統的基礎上應用的包容性實踐。這增加了流程的更多步驟，但提高了產品的商業價值並滿足更多客戶的需求。將Web 內容可存取性納入其指南的公司可以提高所有使用者的可存取性、提高一致性並優化使用者體驗。我了解到，你不需要成為這個領域的專家，但認識到包容性將使你成為一個更有道德的專業人士和一個更有同理心的人。
10.設計系統是無窮無盡的
就像任何產品一樣，設計系統在首次推出後會經歷一個激烈的遞歸過程。產品設計師將報告錯誤和新請求，並需要設計系統團隊的持續支援。隨著公司的發展，產品團隊的優先事項也會隨之變化，因此他們將依靠設計系統來及時滿足新的要求。在創建培訓材料的同時，追蹤工作和改進，以便您可以追蹤誰在何時做了什麼。為了避免回歸風險，我建議使用單獨的版本更新錯誤請求並添加新功能，以便您可以在需要時恢復庫。並且不要忘記，為您的合作者提供知識是持久改進的關鍵。
在我設計系統的經驗中，我必須重新設計和棄用多項任務。為了避免浪費時間，請提前考慮如何創建模組化、可擴展且靈活的解決方案，以促進未來的增強。設計系統可能聽起來像是您遵循的線性過程中的一組步驟，但實際上，它是一個循環過程，包括無限的發布、定期維護和跨職能貢獻。
