TDesign 正式开源发布，腾讯设计云布局重要能力拼图！

随着互联网的快速发展，产品规模和功能日益增加，开发场景变得愈发复杂，传统的设计研发模式已经不足以支撑业务的高速扩张。无论是互联网公司还是传统软件企业，大家都在寻找提升研发效能的路径，以面对日益复杂的软件开发需求，并期待能更高效、更高质量、更可靠、更持续地交付更优的业务价值。

在这样的背景下，腾讯推出了腾讯设计云，以期帮助企业提升设计研发效率，实现高效协同。不仅如此，腾讯还在近期宣布将企业级设计体系 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