原文：Plasma design system
作者：Andrew Couldwell (2017-01-25)
閱讀時間：14m 29s
本案例研究旨在記錄我們如何在 WeWork 創建一個設計系統。我將分享我們對流程、產品設計、用以創建和實踐設計系統的工具的見解，以及我們如何記錄和與團隊共享此系統。
介紹
WeWork 創建了鼓舞人心的共享工作空間，重點是社區。我們設計和構建我們自己的內部數字工具，以滿足我們的業務需求，并管理我們全球的建筑和成員網絡。Plasma 是一個為這些內部業務工具而創建的設計系統。
Plasma 作為一個概念，是由我們的數字創意主管 Nick Stamas 創立的。Nick 向我們的工程師介紹了用 React JS 和 Sass 構建系統的概念，并從此領導了此系統的設計。我負責其設計、創意和文檔。我同時也和產品設計師 Deena Edwards 合作，她將 Plasma 應用于我們的產品。
第一步：設計探索
我們開始用 3 種不同的將應用此系統的內部產品進行試驗——發現、建立和壓力測試樣式、組件庫與模式庫。隨著時間的推移，方向、用戶界面（UI）和樣式都發生了變化，下面我將嘗試捕捉這些變化，以展示被測產品的進展和范圍。
值得注意的是：此系統的設計方向深受 WeWork 的數字品牌指南 Wework Digital Foundations 的影響。
簡單、清晰、干凈
我們的內部工具都是基于網頁的數據密集型產品。簡潔性、可讀性和加載時間都是最重要的。我很早就知道我們正在努力尋求一種清晰、干凈的美學。
色彩理論
此系統主要為白色、黑色和灰色。重要的是，設計不能分散對內容的注意力，因此精妙是關鍵。明亮的顏色用于傳達特別含義。黃色用于主要操作，因為黃色是 Wework 的核心品牌顏色之一。藍色用于導航鏈接。紅色用于警告和警報。我們還使用了紫色作為第三顏色，因為它是我們內部工具中的一種傳統顏色，我們希望在我們的產品中保持一種熟悉的氛圍。
字體匹配
Plasma 專門使用了 Helvetia，一種簡單、粗體的字體。Mac 電腦已經預裝了 Helvetia，而未預裝的電腦將回退至 Arial（類似的、但在網頁上相對安全的字體）。這非常重要，因為不需要通過第三方腳本來加載字體，這意味頁面加載速度更快。
產品設計
我相信您已經多次在 Behance 和 Dribbble 上看到「UI kit——免費下載！」。其中一些看起來很漂亮。但是，除非它們是用真實的產品、內容和數據進行設計的，否則它們中的許多最終都存在缺陷。永遠都不要使內容適應設計，系統必須能應用于任何內容。不要只針對最佳案例場景進行設計——要考慮所有的場景。
使用將應用此設計系統的產品來創建一個設計系統至關重要，這些產品具有真實的數據和問題。
我們的目標不是創建最好看的系統，而是設計一個最能滿足我們的需求的系統——在 Plasma 的案例中是業務需求，而對一些系統來說則是客戶需求。我們當然打算創造令人愉悅的產品，但只是在增強用戶體驗（UX）方面。
下面是我對塑造了此系統的 3 種產品的一點見解：
產品 1：CMS（又名「Maggie」）
我們的 CMS 產品允許我們的營銷和增長團隊在我們的核心營銷網站 wework.com 上添加、編輯和管理我們的建筑和市場。在 Plasma 之前，我們的 CMS 只是簡單的一系列帶基本 CSS 自定義的 HTML 表格。Plasma 塑造了這款產品的 UI 和 UX。下面是這個產品的一小部分 UI 示例。
產品 2：Spacestation
我們的 Spacestation 產品是我們在 WeWork 總部和國際上每座建筑中最常用的工具之一。它是一個數據密集型產品，用于管理與我們的會員和建筑相關的大型信息和賬單數據庫。它存在著很多表格、表單輸入、過濾器和導航——是一個產品設計系統的完美測試平臺！我和 Spacestation 的首席產品設計師 Deena Edwards 合作，對應用于此產品的系統進行構思、應用、壓力測試和迭代。
產品 3：DataQuery
WeWork 的業務性質意味著我們擁有大量的數據！在數字領域，這意味著我們有著大量可供使用的數據，我們可利用這些數據來開發更好的產品，以滿足客戶需求。這個產品的想法是在一個非常合適的時機提出的——我們已經開始構思 Plasma 設計系統，并且知道這個新產品既可使用此系統，又可隨著對數據的額外需求而進一步推動它。我和我們的數據工程團隊合作，構建了儀表板和數據查詢工具。以下是其中一些探索。
第二步：模式和組件
經過幾天的探索、評審和迭代，我們得到了一個滿意的樣式。現在的任務是創建一套全面的模式和組件，包括所有的狀態和場景——本質上是為我們的團隊創建一份全面的 UI 工具包以供使用。
我們的系統由一些基本元素組成，例如為標題和內容定義的文本樣式、調色板、我們稱之為模式和組件的東西，以及模板。
一致的 UI 模式和組件在引導用戶使用產品方面會有很大的作用。
模式
模式是指整個產品中反復出現或始終存在的元素或行為。例子包括導航、卡片、表格、空狀態或加載狀態、通知、警告和對話框。模式是通用的，可以包含組件，并且可以組合在一起構成模板。
組件
組件是指整個產品中反復使用的特定 UI 元素——通常是可操作的，有時則用于傳達含義。舉幾個例子有，按鈕、輸入框、選擇器、開關、頭像和工具提示。
通過此鏈接可快速瀏覽包含設計系統中所有模式和組件的主要 Sketch 文件（如上文所示）。
最好的工具
我們為 UI 設計選擇的工具是 Sketch。那些使 Sketch 非常適用于產品設計的功能使它在系統設計中尤其強大。當您在創建數百個可編輯的 symbol 和易于應用的文本樣式時，Sketch 的簡單性就變得至關重要。
關于響應性
Plasma 的設計是具有響應性的。雖然構建響應式組件很簡單，但模擬響應式就不那么簡單了。至少我們是這么想的。設計能夠在不同瀏覽器寬度下工作的 web UI 非常重要。幸運的是，Sketch 提供了設置元素以不同的方式響應尺寸變化的功能。利用設置、組和 symbol 的組合，您可在 Sketch 中創建基本的響應式 UI。雖然這對斷點沒有幫助，但它在快速查看設計在不同瀏覽器尺寸下如何工作或是否工作方面非常強大。因此，我們創建了具有響應性的模式和組件庫。
閱讀此文可了解 Sketch 中的響應式設計。
第三步：模板的強大力量
為保持產品的一致性，我們必須讓我們的團隊盡可能簡單地使用 Plasma 進行設計。幸運的是，Sketch 的可編輯 symbol 和文本樣式讓分發和維護一個設計系統變得簡單。
如果我們的團隊無法簡單地在他們的工作中應用此系統，那么產品的設計就很容易就誤入歧途。
我們有一個（持續更新的）包含 Plasma 所有內容的主 Sketch 文件。我們最不希望的就是，人們在使用這個主文件的過程中不小心編輯和刪除了一些東西！于是我們創建了一個 Sketch 模板以供我們的團隊使用，托管 Dropbox 上。這個模板有一系列可編輯的 symbol，所有的文本樣式，品牌顏色和一個隨時可用的基本畫板——使用 Plasma 可快速建立和組裝一個用戶界面。
使用已建立的模式和組件使我們能夠專注于用戶體驗、解決問題以及構建有意義的功能和產品。
涵蓋所有場景
我們考慮了系統中所有的「狀態」，并且每個狀態都有相應的 symbol。例如，表單輸入具有占位符、懸停、焦點、填充、錯誤和禁用狀態。下面「多選組件」的示例中，在右側，您可看到「多選/占位符」這個 symbol 是被選中的。您可以在下拉列表中獲取其他所有 symbol——并更改 symbol 為「多選/填充」或「多選/錯誤」。這對于設計或繪制產品流程非常有用！
Craft Library
我們還使用了一個很棒的工具，InVision 為 Sketch 設計的插件 Craft Library。它使我們能夠創建一個共享的資源庫（托管在 Dropbox 上），我們的團隊可使用它來將元素拖動到他們的設計中。
更新（2017 年 12 月）
我們現在使用 Sketch Libraries 來代替 Craft Library。它做的事情或多或少是相同的，但是效率高得多！您對設為 library 的 Sketch 源文件所做的任何更改，都會同步到任何使用該 library 組件的設計中。就很酷。
預先設置按鈕、輸入、樣式等元件庫，可降低重復設計元件的風險。
第四步：記錄設計系統
在創建設計系統時，必須要記住，您將不是唯一使用它的設計師（或開發人員）。
從字面上記錄設計系統是我在這個項目中面臨的最大挑戰。通常我會創建帶注釋的規范——通常是一些 psd 和 sketch 文件，以配合設計。在我的 Adobe Portfolio 案例研究中可以看到運用這個方法的一個很好的例子。雖然規范可以包含所有想象得到的細節，但是當有新的設計師接替你的位置時，仍可能會遺漏或誤解一些事情。我們想利用 Plasma 做到更好。
如何記錄設計系統
我開始閱讀和研究其他團隊是如何做到這一點的。幸運的是，對此互聯網上有很多的答案，很多公司已經公開了他們的文檔。
這里有一個有用的鏈接列表，包含了我發現的所有在線設計系統文檔。希望它對您能有所幫助。
看了網上這么多優秀的例子，我最初的目標就是創建一個網站來記錄系統、規范、示例的使用，并制定所有模式和組件的指南。它可以作為一個快速參考，或者一本可詳細研究的寶典。
但是，我不想因為創建網站所需的設計、構建和時間限制而被耽擱。所以，為了開始著手，我簡單地創建了一個新的 Google 文檔，并開始編寫。隨著文檔內容的增加，我意識到它確實完全符合我們的需要。創建一個公開的品牌網站的唯一理由將是，作為 WeWork Digital 的 “榮譽項目”，或者作為我們開源此系統的資源。
但是就目前而言，事實證明，Google Docs 是最完美的媒介。我們所有的團隊都可以輕易地訪問它，并且他們可以在線評論，這對于反饋很有用。Google Docs 的「Document Outline（文檔大綱）」功能，以及鏈接/定位到文檔中的書簽和標題的功能，為我們提供了足夠的導航。 正如我們在英格蘭北部所說的，Jobs a good’un（大概意思就是塞翁失馬焉知非福……）。
我們的文檔預覽
由于文檔是在私人的 Google 文檔中，所以下面我選取了一些截圖，以便您更好地了解它的結構、布局以及所包含的內容。您可以單擊圖片以查看原圖。
更新：2017 年 12 月
發表這篇文章的大約 11 個月后，這個文檔已經演變成一個您可以看到的網站。我們使用 GitHub 來支持版本控制，而且我們的團隊可以輕松地進行訪問，以便編寫文檔并為其做出貢獻。
使用 markdown 進行編寫，并通過一些 CSS 自定義，您就可以為您的品牌定制文檔。GitBook 并不完美，它不支持響應式，但它已經夠用了。
查看 Plasma 設計系統文檔。
幕后（下載）
我創建了一些資源，以便您深入了解這個設計系統在 Sketch 中是如何建立的，包括 Sketch 文件下載和一份文檔摘錄。可在此鏈接中查看資源。
第五步：管理設計系統
隨著文檔的逐漸形成，設計需要一種有效的方法，以便與開發人員交流和跟蹤系統的構建與集成。我們選擇（并推薦）使用 GitHub。我們為特定的組件創建了 issue，共享設計、規范和 CSS/Sass 的預覽，以簡化開發流程。通過這種方式，我們的工程師就可以一個接一個地處理這些問題，因為他們已經做好準備了，他們將負起責任，并且沒有任何東西會被遺漏！
設計和代碼
Plasma 的主要開發人員也是一名設計師。我們的主要設計師（我）也是一名開發人員。這反映在了我們的流程和系統質量上。通過我們的文檔，我們希望向我們的設計師展示 CSS/Sass，鼓勵他們了解事物的運作方式。從「學習使用此系統進行設計」的角度來看，它有助于明確地查看和學習構建過程的值、間距和命名約定。它也有助于彌合設計和開發之間的鴻溝。
命名約定
最后但同樣重要的是：設計系統的目標之一是，讓設計師、開發人員和產品經理都使用同一套語言。我們可以通過我們都熟悉的一致的語義命名約定（在設計和代碼中）來幫助實現這一點，無論是 Sass 變量、字體樣式、顏色、UI 模式和組件、模板還是頁面名稱。
一切都很順利。
這不是結束
我們對 Plasma 有一個宏大的計劃。我們正在努力開發這個系統，并將其推廣到您之前已看過的 Spacestation 和 CMS 產品中。在這個過程中，我們學到了很多東西，并致力于從全球使用我們的工具的員工那里獲取有價值的反饋，然后進行系統的迭代。我們已經討論過 Plasma 的開源，但我們還沒有做到這一步。
希望您喜歡這個案例研究，并對我們的設計過程、使用的工具和 Plasma 的預覽有了了解。：）
特別感謝 WeWork 的 Nick Stamas 和 Deena Edwards 在這個項目上的辛勤工作和支持。還有我的編輯 Meagan Fisher !
附注：不要直接使用 Sketch 來創建這樣一個產品設計系統。我們為達到這個階段做了大量的工作。我在這個項目上的聯合負責人 Nick Stamas 在 Selling a design system at your company 中講述了這個過程，推薦您接下來閱讀這篇文章。
更新： 2017 年 12 月
我寫了一篇關于創建 Plasma 設計系統的基礎工作的新文章 Laying the foundations for system design，以及為同個公司創建的另外一個設計系統！
更新：2019 年
我正在寫一本關于系統設計和數字品牌指南的書！我很喜歡寫作的過程，我計劃在 2019 年印刷出版（還有電子書）。通過這個鏈接查看更多信息和進行注冊以接收更新：Laying the Foundations — A book about design systems and digital brand guidelines。
以上翻譯包含個人理解，僅作為個人學習筆記使用。如有錯誤，求指正吖，非常感謝 ^^
感謝原文作者及所有分享想法與經驗的人 ^^
