設計系統（Design System），設計和開發之間的「DevOps」

• 2021 年 11 月 13 日
• 筆記

最近，我們網站的上新增了幾個新功能，比如通過導航欄的QR Code可以下載App；通過Carousel的方式，顯示多條資訊。

以往這樣的功能可能需要2-3個Sprints完成，但是現在這些功能都是在一個Sprint內完成了所有功能的開發和測試。之所以我們能高效的完成開發和測試，主要歸功於我們對設計系統（Design System）的成功應用。

什麼是設計系統？

對於設計系統，大家已經不太陌生，業界已經有很多成功的案例，比如像Google的Material Design，螞蟻金服的Ant Design，抖音的Semi Design等等。這些公司藉助他們的設計系統，成功的改變了他們設計和開發產品的方式，通過一組可重用的組件，以及一套指導這些組件使用的規範，可以快速的完成設計和開發工作。

設計系統和普通的UI組件的一個主要差別，就是使用設計系統完成的產品，其結果總是一致的。就像Google的所有產品，你都可以看到Material Design的影子，完全符合其設計規範。但是像BootStrap這樣的UI庫，可以搭建出風格完全不一樣的網站。

所以通常我們說的設計系統，就是一組可重用的組件，以及一套指導這些組件使用的規範。基於設計系統的組件和規範，可以組合出來任意數量的應用。

對於我們公司來說，由於涉及多個品牌和多個平台終端，如果有一套統一的設計系統，將可以極大的提升我們的設計和開發效率，並且可以保證我們設計開發的結果和品牌形象保持一致。

所以從去年底開始，由設計部門最初提出構想，Web開發部門參與實施，我們一起構建了公司的設計系統。

我有幸參與其中，負責其項目管理和架構設計工作。項目之初，我也認為設計系統不過是一套設計規範加上一套組件庫，並不是什麼新鮮的概念。

等到今年上半年系統初步實施完成，開發團隊和設計團隊都開始使用這套系統，我才逐漸發現，設計系統其實不僅是一套設計規範和組件庫，更為設計人員和開發人員之間帶來一種新的協作模式，甚至是一種文化的改變，就像我們常說的開發和運維之間的DevOps一樣。

設計系統在幫助構建設計和開發之間的協作文化

在我們談到DevOps時，最讓人振奮的就是開發和運維一起緊密協作的工作方式，從而可以更快更可靠的構建、測試和發布軟體。

但當我們談到設計系統，你可能會想到Design Token，想到組件庫，想到文檔，卻很難聯想到設計和開發的協作，以及它和DevOps有什麼關係。

而實際上，我們從設計系統開始構建之初，設計和開發兩個團隊，就一直一起緊密的協作，共同完成了這套系統的構建，也一點點的形成了協作的文化。

設計和開發有了共同的溝通語言Design Token

在設計系統之前，設計和開發都在各自的世界裡用自己的語言進行工作，相互之間也很難溝通，最終的結果就是每次設計出來的設計稿，在開發實現後，總是有比較多和設計稿上的出入，因為開發並不能很好的理解設計稿，需要設計和開發溝通多次才能達到與最初設計一致的結果。

所以在構建設計系統時，最重要的事情之一就是定義Design Token。

Design Token本質上是一套Key Value的組合，將設計規範抽象成一個個的key value，比如下圖就是一個顏色的design token列表，簡單而清晰。

有了Design Token後，設計人員在描述設計稿時更簡單清晰，開發人員也易於理解。

對比一下下面這兩張圖，第一張是在有Design Token之前，一張是在有Design Token之後，差別非常的明顯。

虛擬的設計系統團隊

Design Token只是第一步，要做好設計系統，團隊才是最重要的！

和很多公司不一樣，我們沒有一個專門的設計系統團隊來負責整個設計系統的構建，從一開始就是以一個虛擬團隊的形式在運作。

當初我在和設計團隊一起討論設計系統的時候，我們都知道這絕對是一個很好的方向，但是如果遵照傳統的立項、成立團隊的方式，我們還要等很久才能開始做這件事，於是我們決定以虛擬團隊虛擬項目組的形式來做這件事。就像一個內部的開源項目，大家利用20%的工作時間貢獻其中。

這在一開始的時候給我們帶來巨大的挑戰，我們不能全職做這件事，必須利用日常項目之外的資源來投入。好在設計團隊在之前已經做了不少準備工作，我之前也領導過一個內部的前端組件庫開發。所以我們從去年底開始正式從頭設計和開發這套系統，設計部門定義Design Token和設計系統所需要的基礎組件，我從自己團隊和其他團隊找了幾個對設計系統有興趣的前端開發人員一起成立開發小組，和設計團隊一起開始了項目。

雖然是一個虛擬的團隊，但是我們一樣是按照敏捷開發的方式在運作，我們每兩周一個Sprint，儘可能在每個Sprint交付一些內容。我們將所有的任務和Bug通過Jira管理跟蹤，每周會有團隊的會議交流進展和下一個Sprint的計劃。

得益於虛擬團隊的模式，讓我們一開始就沒有了部門的壁壘，不需要去區分這是設計部門還是開發部門的事情，從一開始大家就是為了構建設計系統這個共同的目標一起努力。

也正是由於虛擬團隊的模式，讓跨團隊協作成為可能，每個開發團隊的成員都可以參與其中，到現在為止，已經有至少4個不同的開發團隊的成員一起參與了我們設計系統的構建。

虛擬團隊的模式，還有一個意想不到的好處，就是在後面推廣設計系統時，我們沒有受到什麼阻力，每個團隊都願意遷移到設計系統，因為他們也曾參與其中。

自動化設計系統的構建

我們公司是DevOps的踐行者，自動化的理念深入人心，我們儘可能自動化一切自動化的操作，從日常的測試到生產環境的部署，都是自動化操作。

所以在構建設計系統時，我們也將自動化融入設計系統的很多方面。

自動更新發布Design Token

我們所有的Design Tokens，由設計部門用一個Google Spreadsheet管理和維護。如下圖所示：

當設計部門對Design Tokens有任何更新，會通知開發團隊，開發團隊會通過自動化腳本，將Spreadsheet的內容導出，並解析成標準的Json格式，然後針對不同的應用平台生成不同的格式，最後以PR的形式提交到Git上，當PR通過審核和自動化測試後，CI/CD幫助將更新後的內容自動發布新的版本。

藉助自動化，設計人員參與系統的更新發布

在以前，設計人員無法參與到開發中，對於發布更新ICON之類的事情，必須給開發團隊提交Jira Ticket和必要的資源，然後等待開發團隊安排工期，在某個時間完成。

而現在，我們藉助設計系統，大大簡化了這些操作，設計人員可以直接通過Git網頁版以PR的形式提交新的SVG文件，當通過自動化測試，PR合併後，CI/CD會自動將SVG文件發布成ICON組件以及為移動端生成對應尺寸的png文件。

不止是對ICON的發布更新實現了自動化，整個設計系統文檔系統的更新也是如此，設計人員可以直接通過Git網頁版，提交Markdown格式文檔的更新PR，當PR合併後，文檔網站就會自動更新。

自動化測試設計

在自動化測試中，UI的自動化測試是最難的。現在由於設計系統對Design Token的抽象，所有介面組件都夠建於Design Token之上，所有介面的屬性比如顏色、尺寸都必須從Design Token中獲取。

所以我們在編譯前端組件的時候，會有插件檢查所有設計系統UI的屬性，當發現有組件的屬性使用了超出了Design Token範圍的值，則會出現錯誤提示，可以第一時間避免設計錯誤的發生。

在Code Review階段，我們也計劃藉助機器人幫助我們發現程式碼中對設計規範的錯誤使用。

當然設計的自動化測試我們還有很多路要走，但設計系統讓對設計的自動化測試成為可能，未來我們還會在這個方向上繼續探索。

設計系統，讓資訊更透明

在設計系統之前，設計和開發都在各自的部門內工作，對雙方來說對方的資訊就像一個黑盒子，相互並不了解對方多少，這也給溝通協作上帶來一定的障礙。

在設計系統的第一階段完成後，我們做的第一件事就是用設計系統搭建了設計系統的網站，將設計團隊所有設計的規範文檔、Design Token的內容、組件的設計規範都放在了設計系統網站上；開發團隊開發出來的組件，所有組件相關的使用說明文檔也都放在了設計系統網站上。

不僅如此，以前設計人員在向開發提供設計稿時，僅僅提供設計上的顏色尺寸等資訊，但現在的設計稿，會對相關的組件和屬性，都附帶有到設計系統網站的鏈接，讓開發可以清楚的知道在實現時，可以直接使用哪些設計系統的組件，以及該如何設置屬性。

藉助這個公共的設計系統網站，開發和設計都通過同一個網站獲取資訊，資訊對雙方來說不再是黑盒子，而是相互透明的，開發對設計的規範有了更深入的了解，設計也知道了開發是如何使用組件的。

最後

經過一年的努力，我們已經打造出一個適合自己的強大的設計系統，並且成功在Web部門落地，主要的Web系統已經集成了設計系統，在新項目中極大的提升了設計和開發的效率。

設計系統的成功，並不僅僅是因為我們重新打造了一套組件庫，也不在於它有一套Design Token，而是在於它更加自動化的方式構建系統的UI，讓設計和開發之間的資訊更加透明，最重要的是，設計系統構建了更好的設計和開發之間協作文化。 這也同樣是DevOps的三個重要原則：自動化、資訊透明、構建協作文化。

就像我們基於設計系統開發的像二維碼下載這樣的項目，之所以能高效交付，正是由於開發人員和設計人員日常已經緊密協作，藉助設計系統網站對Design Token的各種規範已經熟悉，那麼在實現介面的時候，就不需要反覆的去和設計確認細節；設計系統本身豐富的組件庫，可以半自動化的幫助搭建UI；在提交程式碼之前，設計系統的自動化檢測幫助發現了可能的介面錯誤，避免了後續UI錯誤導致的返工。

設計系統正一點點的在改變我們的研發文化，讓設計和開發之間的協作更加緊密。