TDesign 是來自騰訊內(nèi)部近 300 名設(shè)計(jì)師與開發(fā)者共同打造，經(jīng)由 500+ 項(xiàng)目使用、驗(yàn)證和錘煉過的企業(yè)級設(shè)計(jì)體系， 秉承包容、多元、進(jìn)化、連接的價值觀，TDesign 期望與用戶、行業(yè)及合作伙伴等一起打造具有競爭力的產(chǎn)品體驗(yàn)。

從設(shè)計(jì)出發(fā)，TDesign 提供了完整的設(shè)計(jì)語言、視覺風(fēng)格指南和設(shè)計(jì)資源，以及基于 Vue2、Vue3、React （Vue3、React 目前仍在 Alpha 版本迭代中）等業(yè)界主流技術(shù)棧的組件，幫助開發(fā)者可以快速開發(fā)桌面端、移動端和小程序端等多個版本的應(yīng)用程序。

如果你對于 TDesign 感興趣，可以打開 TDesign 官網(wǎng)，體驗(yàn) TDesign。如果你對 TDesgin 誕生的歷史感興趣，不妨來看看 TDesign 誕生背后的故事。（ps：文末送福利的哦圖片）

* TDesign 官網(wǎng)：https://tdesign.tencent.com

自 2019 年開始，騰訊正式宣布在內(nèi)部推行開源協(xié)同，鼓勵所有源代碼對公司內(nèi)部全部開放，共同協(xié)作。

也正是這樣的開源協(xié)同的背景，使得騰訊的設(shè)計(jì)師和開發(fā)者們思考到：“有沒有可能通過開源協(xié)同，解決過去騰訊內(nèi)部團(tuán)隊(duì)分別維護(hù)設(shè)計(jì)體系，各設(shè)計(jì)體系之間質(zhì)量參差不齊的問題”。出于這樣的目的，在騰訊內(nèi)部建立起了開源協(xié)同團(tuán)隊(duì)，來共同思考和研究這個問題，在 2020 年 2 月份，通過多次遠(yuǎn)程會議，確定了 TDesign 的產(chǎn)品目標(biāo)和技術(shù)路線，并在全員的參與下共同投票選出 TDesign 的名字。

但 TDesign 應(yīng)該是什么樣的設(shè)計(jì)體系？

設(shè)計(jì)師們找到了答案：TDesign 應(yīng)當(dāng)是一個擁有包容、多元、進(jìn)化、連接的價值觀，期望為用戶、行業(yè)及合作伙伴等打造具競爭力的品牌與產(chǎn)品體驗(yàn)的設(shè)計(jì)體系。

• 包容，是為了讓 TDesign 兼容并蓄，既能滿足當(dāng)下需求，也能應(yīng)用于更廣泛場景；
• 多元，是 TDesign 應(yīng)當(dāng)能夠賦能不同業(yè)務(wù)，探索無限可能；
• 進(jìn)化，是 TDesign 應(yīng)當(dāng)成為一個動態(tài)的設(shè)計(jì)體系，在“以用戶價值為依歸”的基礎(chǔ)上，成長進(jìn)化；
• 連接，是 TDesign 需要用最大的努力去連接賦能，聯(lián)動融通。

有了目標(biāo)和價值觀，TDesign 也真正開始進(jìn)入落地的階段。

在項(xiàng)目剛剛落地時，通過內(nèi)部發(fā)起的貢獻(xiàn)者招募，大批設(shè)計(jì)師和開發(fā)者帶著原有業(yè)務(wù)組件的經(jīng)驗(yàn)、成果和滿腔的熱血，在很短的時間內(nèi)產(chǎn)出了大量的設(shè)計(jì)稿和組件，完成了項(xiàng)目的初始化建設(shè)。但因?yàn)閷缂夹g(shù)棧維護(hù)組件庫的復(fù)雜度認(rèn)識不夠，各個框架中對同一組件的文檔和 API 實(shí)現(xiàn)都有差異，用戶使用組件庫體驗(yàn)不一致的問題，一直困擾著 TDesign 團(tuán)隊(duì)。

為了解決協(xié)作的問題，TDesign 在進(jìn)行第二期迭代時，通過一系列工具和工作流程來規(guī)范組件的開發(fā)過程，選擇更加開源風(fēng)格的異步 issue 討論，開發(fā)了工具來自動生成各個框架的 API 定義和描述文檔，引入 CI / CD 流程來降低人工參與的比率，從而減少因?yàn)槿硕稿e的可能。通過引入機(jī)器人的方式，來提升信息推送的效率，讓每一個人都可以時刻知道什么事情是需要做的，什么事情是不需要做的。借助于這些更加“開源”風(fēng)格的工具和協(xié)作方式，TDesign 的效率得以提升，讓 TDesign 在進(jìn)行二期開發(fā)時，比預(yù)期更快地完成任務(wù)。

借助于異步和聚焦的討論方式，問題可以被更加深刻地討論和思考，從而更容易得出一個符合預(yù)期的結(jié)論，在開發(fā)時能夠以更高的效率完成組件的封裝和代碼的編寫。也正是這樣更加開源的方式，最終構(gòu)建出了如今的 TDesign。

作為一款企業(yè)級設(shè)計(jì)體系，TDesign 的特性可以總結(jié)為如下三點(diǎn)：

1. 完整：

完整的技術(shù)、設(shè)計(jì)資源，將設(shè)計(jì)與開發(fā)者從重復(fù)勞動中釋放出來

TDesign 為開發(fā)者提供了多種主流開發(fā)技術(shù)棧的支持：TDesign 已經(jīng)支持了 Vue2、Vue3、React 和移動端小程序的開發(fā)，其他技術(shù)棧如 Angular、Flutter 也有相應(yīng)貢獻(xiàn)團(tuán)隊(duì)正在開發(fā)。

為了實(shí)現(xiàn)開發(fā)與設(shè)計(jì)之間的高效協(xié)同，TDesign 中包含了豐富可復(fù)用的設(shè)計(jì)組件資源，如色彩體系、文字系統(tǒng)、動效設(shè)計(jì)、圖標(biāo)元素、布局結(jié)構(gòu)等，覆蓋支持 Axure、Sketch、Figma、Adobe Xd 等各大產(chǎn)品設(shè)計(jì)軟件，將設(shè)計(jì)和開發(fā)者從重復(fù)勞動中釋放出來。

除了常規(guī)設(shè)計(jì)資源，TDesign 還提供了輔助設(shè)計(jì)工具如 Sketch 設(shè)計(jì)插件，也支持在騰訊 CoDesign、即時設(shè)計(jì)、Pixso、墨刀等市面常用設(shè)計(jì)工具中使用 TDesign 設(shè)計(jì)物料。

2. 一致：一致的設(shè)計(jì)和開發(fā)體驗(yàn)

TDesign 將騰訊內(nèi)部多年設(shè)計(jì)經(jīng)驗(yàn)提煉總結(jié)為專業(yè)的設(shè)計(jì)指南，其所提供的通用設(shè)計(jì)解決方案，能夠幫助產(chǎn)品經(jīng)理、設(shè)計(jì)師、開發(fā)者等角色高效完成企業(yè)級產(chǎn)品的設(shè)計(jì)和研發(fā)，并保持設(shè)計(jì)語言和風(fēng)格的一致，滿足用戶體驗(yàn)的要求。

基于 TDesign 的設(shè)計(jì)體系規(guī)范，TDesign 同時上線了組件庫的桌面端和移動端，提供了多個技術(shù)棧實(shí)現(xiàn)版本。通過一系列協(xié)作流程和輔助工具，保證各技術(shù)棧組件 API 和實(shí)現(xiàn)產(chǎn)物一致。借助這些能力，使得項(xiàng)目即便使用了多種不同的技術(shù)架構(gòu)或技術(shù)棧，開發(fā)者也可通過 TDesign 通用設(shè)計(jì)組件庫進(jìn)行開發(fā)，顯著降低學(xué)習(xí)成本，在構(gòu)建統(tǒng)一/多端覆蓋/跨技術(shù)棧的前端應(yīng)用時更具優(yōu)勢。

3. 易用：清晰的設(shè)計(jì)指南和開箱即用的解決方案

TDesign 設(shè)計(jì)體系在形成過程中，提煉了不同業(yè)務(wù)、場景的設(shè)計(jì)經(jīng)驗(yàn)，提供了通用的設(shè)計(jì)指南以降低使用門檻。對于不同企業(yè)產(chǎn)品的品牌定制需求，TDesign 支持使用者對設(shè)計(jì)風(fēng)格進(jìn)行擴(kuò)展，目前已經(jīng)將設(shè)計(jì)樣式梳理歸納為 Design Token，形成一套企業(yè)內(nèi)部的語義化設(shè)計(jì)規(guī)范，方便后續(xù)進(jìn)行統(tǒng)一的管理和使用擴(kuò)展。

在主題配置方面，TDesign 提供了明亮和暗色兩種模式，支持一鍵切換，提升用戶的使用體驗(yàn)。后續(xù)，TDesign 還會推出針對于不同垂直領(lǐng)域的行業(yè)組件，覆蓋更多的業(yè)務(wù)范圍。產(chǎn)品團(tuán)隊(duì)可以借助內(nèi)置的行業(yè)主題，快速配置對應(yīng)需求，啟動業(yè)務(wù)開發(fā)。

TDesign 同步上線了一款開箱即用的中后臺框架 TDesign Starter Kit，開發(fā)者可以通過它快速體驗(yàn)組件功能，也可以將它修改為項(xiàng)目基礎(chǔ)腳手架工程，快速實(shí)現(xiàn)從 0 到 1 的產(chǎn)品開發(fā)上線。

* TDesign Starter Kit：https://tdesign.tencent.com/starter/

通過開源，TDesign 期待持續(xù)打磨出更加完善易用的組件庫，包括在國際化、無障礙和適老化方面有更成熟的解決方案，對更多的產(chǎn)品和使用者有幫助。

借助社區(qū)，TDesign 期待與更多產(chǎn)品設(shè)計(jì)師和開發(fā)者有專業(yè)交流，甚至是收獲一個積極活躍的 TDesign 社區(qū)。

非常期待你對 TDesign 的持續(xù)關(guān)注和反饋意見。更歡迎同道中人的你參與 TDesign 的開源共建，與 TDesign 從開源到更加成熟的旅程中一起進(jìn)步。

您有三種方式使用或體驗(yàn) TDesign：

1. 訪問官網(wǎng)：https://tdesign.tencent.com

2. 訪問 GitHub 主頁：https://github.com/Tencent/tdesign

3. 通過 CoDesign 預(yù)覽 TDesign 組件樣式

4. 歡迎加入我們的企業(yè)微信群交流：

感謝參與 TDesign 的近 300 名同學(xué)的支持，在 TDesign 從 0 到 1 的過程中貢獻(xiàn)了寶貴的經(jīng)驗(yàn)、代碼、組件、文檔、建議等等所有的付出，使 TDesign 得以起步，得以服務(wù)用戶；

感謝騰訊內(nèi)部開源協(xié)同的文化和技術(shù)委員會的機(jī)制，讓 TDesign 得以在企業(yè)內(nèi)部孵化孕育，讓 TDesign 凝聚滿腔的熱血；

感謝開源的前行者，為 TDesign 的發(fā)展提供了理論和實(shí)踐上的參考和各類開源工具的幫助；

感謝 InfoQ、CSDN、開源中國、51CTO、優(yōu)設(shè)網(wǎng) 等平臺以及 前端之巔、前端早讀課、前端大全、web 前端開發(fā)、前端新世界、前端大學(xué)、龍爪槐守望者等自媒體，讓 TDesign 可以為更多人所知。

感謝所有 TDesign 的使用者和關(guān)心者，你們是 TDesign 的啟明燈，指引 TDesign 的前進(jìn)方向，TDesign 與大家共成長。

圖為 TDesign 的貢獻(xiàn)者們

更多設(shè)計(jì)系統(tǒng)和體系的干貨：

優(yōu)設(shè)推薦關(guān)注“騰訊設(shè)計(jì)”官方公眾號，第一時間獲取騰訊的設(shè)計(jì)方法論