隨著互聯網的快速發展，產品規模和功能日益增加，開發場景變得愈發復雜，傳統的設計研發模式已經不足以支撐業務的高速擴張。無論是互聯網公司還是傳統軟件企業，大家都在尋找提升研發效能的路徑，以面對日益復雜的軟件開發需求，并期待能更高效、更高質量、更可靠、更持續地交付更優的業務價值。

在這樣的背景下，騰訊推出了騰訊設計云，以期幫助企業提升設計研發效率，實現高效協同。不僅如此，騰訊還在近期宣布將企業級設計體系 TDesign 正式開源，進一步將騰訊自有能力釋放給更多企業。

騰訊設計云：生于騰訊、聚于騰訊

在騰訊海量的 to B 和 to C 的業務實戰中，設計團隊為了服務各自的業務，在生產過程中開發了大量工具或平臺，范圍涵蓋素材資源、設計協作、圖片視頻素材制作與剪輯、以及數據可視化和低代碼搭建等方面。

自 930 變革以來，自研上云、開源協同就成為了騰訊重要的技術方向，如何讓云服務從資源管理變成一個完整的研發體系，從而實現降本增效是騰訊一直在思考的問題。在這樣的背景下，騰訊公司級聯合團隊將這些能力和內容提煉成設計資產、管理工具和多方面的產品能力，匯聚成了一個公司級的設計工具平臺——騰訊設計云，聚焦解決產設研工作流程中的常見痛點，提供效能工具、正版素材資源、解決降本、增效的問題，希望達成高效設計、輕松協同的最終目標。

騰訊設計云的產品矩陣包括：運用于調查分析的騰訊問卷、智能化設計生產平臺智繪設計、長短視頻內容創作與協作平臺云創多媒體引擎、一站式設計協作平臺 CoDesign、團隊協同平臺 ProWork、低代碼開發平臺微搭低代碼、軟件研發管理協作平臺 CODING 、企業級產品設計體系 TDesign 以及正版圖庫直通車和正版曲庫直通車兩大版權素材庫，為企業客戶提供了版權素材、用戶研究、智能設計、設計協同、快速研發等能力，并且這些設計能力全部源自騰訊公司內部的 Oteam 團隊。

據了解，騰訊設計云的產品服務著 QQ 音樂、騰訊云、騰訊會議、企業微信等大型產設研團隊、也服務過數字廣東、富途證券、蘑菇街等大型企業。除此以外，騰訊設計云不僅匯聚了多款 SaaS 化的成熟產品，還包括一些未上云但已經在騰訊內部服務于項目提效的工具。盡管各個產品的商業化階段不盡相同，但它們都在各自所誕生的部門中發揮著作用。

所以說，“生于騰訊，聚于騰訊”便是對騰訊設計云誕生過程最好的概括。

據騰訊設計云團隊透露，隨著項目進度的推進和產品成熟度提升，未來還會將更多已沉淀的能力開放出來，比如在設計師比較關注的設計稿校對方面，持續為企業提供數據可視化、智能生產工具等提升生產效率的工具。

TDesign 應運而生

事實上，在產品開發的過程中，團隊參與人員的痛點是各不相同的：比如設計師希望了解組件庫的使用規范、適用場景、拓展方案等等；產品經理希望知道組件能否滿足業務場景等等；開發更關心組件的接口、方法、屬性等等。想逐一解決上述痛點成為了一個現實又復雜的問題，所以不少企業都會選擇使用組件庫來提升設計效率、產研效率。

騰訊自然也不例外，并且大部分部門都有各自的組件庫產品。

但對于騰訊這樣的企業而言，這種做法也暴露出了許多問題：首先是重復人力造“輪子”，每個業務團隊都需要剝離一部分人力去維護組件庫；其次，這些組件庫因為人力投入程度不同，其產品質量和維護的情況層次不齊，通用交互方式的體驗也不一致；此外，由于這些組件庫都有各自的優勢、劣勢，導致騰訊內部在技術選型時困難屢現。

據了解，直到 2019 年，騰訊內部重復造輪子的情況愈發嚴重，公司有強烈的呼聲想把這些輪子合并在一起，為了應對這一情況，騰訊內部建立了開源協同委員會，騰訊的設計師們思考到：“有沒有可能通過開源協同，解決過去騰訊內部團隊分別維護設計體系，各設計體系之間質量參差不齊的問題”。

于是在 2020 年 2 月份，通過多次遠程會議，確定了 TDesign 的產品目標和技術路線，并在全員的參與下共同投票選出 TDesign 的名字。“它完整代表著騰訊體系下的設計語言，同時也留有概念擴展的空間，后面可以增加其他模塊組件。” TDesign 團隊介紹道。

設計伊始，TDesign 便是為了服務內部業務

TDesign 設計伊始，就是要方便騰訊內部的設計師與研發人員進行使用，所以 TDesign 需要支持不同的框架、不同的設計資源，還要有一套完整的設計價值觀和設計風格指南，也使得 TDesign 有了一些區別于其他組件庫的特性，總結來看，有以下三個方面：

完整

業界的組件庫基本以支持一至兩個技術棧為主，而 TDesign 則支持了 Vue 2、Vue 3、React 和移動端 Vue 3、微信小程序的開發，與此同時，Augular、Flutter 等熱門技術棧也在開發當中。

目前，TDesign 的大部分組件已經完成了內測版本的發布，后續將逐步發布公測版本和正式版本。

為了實現開發與設計之間的高效協同，TDesign 中還包含了色彩體系、文字系統、動效設計、圖標元素、布局結構等一系列設計組件資源，并覆蓋了 Axure、Sketch、Figma、Adobe Xd 等各大產品設計軟件。除了常規設計資源，TDesign 還提供了輔助設計工具如 Sketch 設計插件，也支持在騰訊 Codesign、即時設計、Pixso、墨刀等市面常用設計工具中使用 TDesign 設計物料。

一致

TDesign 將騰訊內部多年設計經驗提煉總結為專業的設計指南，其所提供的通用設計解決方案，能夠幫助產品經理、設計師、開發者等角色高效完成企業級產品的設計和研發，并保持設計語言和風格的一致，滿足用戶體驗的要求。

基于 TDesign 的設計體系規范，TDesign 同時上線了組件庫的桌面端和移動端，提供了多個技術棧實現版本。通過一系列協作流程和輔助工具，保證各技術棧組件 API 和實現產物一致，大大降低了開發人員的學習成本。

易用

TDesign 設計體系提煉了不同業務、場景的設計經驗，提供了通用的設計指南，以降低使用門檻。對于不同企業產品的品牌定制需求，TDesign 支持使用者對設計風格進行擴展，目前已經將設計樣式梳理歸納為 Design Token，形成一套企業內部的語義化設計規范，方便后續進行統一的管理和使用擴展。

文檔與 API 規范統一是主要的技術挑戰

TDesign 團隊坦言，“以前我們在做單個組件庫的時候，覺得好像沒什么難度，但是自從做了 TDesign 才發現跟我們原本想的并不一樣。因為 TDesign 本身支持多種框架，后續還計劃支持多語種，所以一般組件庫在建設過程中遇到的問題，在 TDesign 體系上都會被放大到很多倍。”

具體來說，在協同過程中會遇到文檔規范統一以及 API 規范統一兩大難題。

首先，由于 TDesign 需要支持三種或三種以上的技術框架，所以不可能每一個框架都重寫一遍文檔，如果能將每個框架中公共的部分進行復用，僅重寫示例代碼區域就可以解決很大一部分問題。

為此，TDesign 團隊輸出了技術方案，以應對重復寫文檔的問題。TDesign 輸出的架構圖主要分為編譯層、渲染層以及輸出層：其中編譯層主要用來解析 Markdown 格式，解決一系列重復的工作；渲染層來處理公共區域，使得不再需要輸出組件內的文檔；輸出層把公共部分剝離出來以后，再把各個框架獨立的部分組合起來，最后整體輸出 TDesign 的官網站點。

其次，由于每個框架既有共性又有特性，從長遠考慮，不僅要支持 API 文檔自動化，還要支持 API TS 代碼、API Props 代碼自動化。為此，TDesign 團隊輸出了一套自動化系統的流程，把整個 API 相關的信息錄入到數據庫中，而后通過接口語言解析器解析成不同的框架、文檔或者代碼。

目前，TDesign 已經在 React、Vue 和小程序三個框架中實踐并成功運行，解決了手工維護文檔成本高的難題。

歷經 2 年內部開源，TDesign 如何快速繁榮？

“在項目落地之初，團隊也走了不少彎路，我們把大量的時間和精力消耗在了傳遞信息上，也因為對跨技術棧維護組件庫的復雜度認識不夠，各個框架中對同一組件的文檔和 API 實現都有差異，所以用戶使用組件庫體驗不一致的問題，一直困擾著 TDesign 團隊，也使得 TDesign 的開發進展陷入了僵局。”TDesign 團隊在接受 InfoQ 采訪時表示。

為了解決上述提及的問題，TDesign 在進行第二期迭代時，就開始學習開源社區的協作方式，摒棄了企業熟悉的即時拉群溝通，而選擇了更加開源風范的異步 issue 討論，借助更加異步的討論方式，問題可以被深刻地討論和思考，從而更容易得出一個符合預期的結論，在開發時能夠以更高的效率完成組件的封裝和代碼的編寫。此外，在開源協作的過程中還引入了 CI / CD 流程來降低人工參與的比率，來提升信息推送的效率。

TDesign 團隊表示：“無論是個人使用者還是團隊使用者，我們都是堅持公平、公正、透明的原則，比如日常討論的問題、方案以及計劃，都會在 GitHub 上公開展示。”

據了解，不少 TDesign 的核心貢獻者都是先從個人項目試用組件庫，然后開始提交第一個 Bug Issue，再到提交第一個 Feature MR，最后逐步參與 Code Review 和方案制定的工作，經 TDesign 團隊初步計算，該項目的核心貢獻人數大約在 100 人左右。

正是通過這種“開源”風格的工具和協作方式，TDesign 的研發效率才能得以提升，并且超預期地完成了第二期的迭代任務。在過去的一年，隨著騰訊內部有越來越多的人參與其中，TDesign 關閉了 1k+ Issue，進行了 5k+ 次 CR，保持著每周迭代一個新版本的節奏。

寫在最后

在 TDesign 團隊看來，決定開源的初衷非常簡單，一方面，TDesign 歷經了兩年的內部開源，已經實現了從 0 到 1 的建設，希望用 TDesign 已經沉淀出的能力為社區貢獻價值；另一方面，也希望能夠借助社區的力量，將交流協作的范圍擴展到公司外，幫助 TDesign 實現從 1 到 N 的跨越。

“我們深知從開源到成熟是一個漫長的旅途，非常期待同道人與 TDesign 并肩而行，共同進步。”

隨著本次企業級設計系統 TDesign 的開源發布，騰訊設計云產設研一體化協同的能力拼圖已基本打造成型，而這也是設計開源協同向前邁出的一小步。在未來，設計云還會將騰訊內部的設計解決方案逐漸釋放，并通過智能化生產與開發可視化能力，進一步降低企業開發門檻，提升協同效率。 

TDesign 現已開放，Github 地址：https://github.com/Tencent/tdesign

TDesign 官網：https://tdesign.tencent.com/?from=nini_1