TDesign騰訊企業(yè)級設計體系

TDesign 是一款誕生于騰訊內部、擁有完整的設計價值觀和視覺風格指南的企業(yè)級設計體系，同時提供了豐富的設計資源，在設計體系基礎上產出基于 Vue、React、小程序等業(yè)界主流技術棧的組件庫解決方案，適合用于構建設計統一/多端覆蓋/跨技術棧的企業(yè)級前端應用。

產品特性

完整

• 支持了 Vue 2、Vue 3、React 和移動端 Vue 3、微信小程序 的開發(fā)，其他技術棧如 Augular、Flutter 正在開發(fā)中
• TDesign 包含豐富可復用的設計組件資源，如色彩體系、文字系統、動效設計等，覆蓋支持 Axure、Sketch、Figma、Adobe XD 等各大產品設計軟件
• 提供輔助設計工具如 Sketch 設計插件，也支持在騰訊 CoDesign、即時設計、Pixso、墨刀等市面常用設計工具中使用

一致

• 擁有統一的設計價值觀和視覺風格，幫助產品在跨端設計和開發(fā)過程中保持一致的產品使用體驗
• 各技術棧產物 API 定義和實現保持一致，在構建統一/多端覆蓋/跨技術棧的前端應用時更有優(yōu)勢

易用

• 提煉不同業(yè)務、場景的設計經驗，提供通用的設計指南以降低使用門檻
• 支持使用者通過 Design Token 對設計風格進行擴展
• 提供 Starter Kit 幫助使用者快速上手

文檔

• 介紹
• 參與貢獻
• 基礎組件
• 解決方案
• 中后臺設計指南

更多文檔在 TDesign 官網。

設計指南

TDesign 將騰訊內部多年設計經驗提煉總結為專業(yè)的設計指南，提供的通用設計解決方案。

• 設計價值觀
• 色彩
• 字體
• 動效
• 圖標
• 布局
• 暗黑模式

更多內容參考每個組件的指南部分，例如：Button。

設計資源

為了實現開發(fā)與設計之間的高效協同，TDesign 中包含了豐富可復用的設計組件資源：

• Figma 設計資源
• Sketch、Axure、Adobe XD 等設計資源
• TDesign Maker: 一款來自 TDesign 的 Sketch 插件

倉庫

TDesign 是一個 multi-repo， TDesign 有如下倉庫：

主倉庫和通用倉庫

桌面端組件庫

移動端組件庫