English | 简体中文

TDesign is a comprehensive Enterprise Design System, and component libraries have been implemented for versions such as Vue, React, and Wechat MiniProgram. TDesign has advantages when used for building applications with consistent design and cross-platform, multi-tech stack capabilities.

Repositories

The following are the repositories for TDesign：

Repositories for Desktop Components

Repositories for Mobile Components

Repositories for Shared

Repositories for Out-of-box Starter Kits

Why TDesign

Before 2019, there were many internal design system and component library projects within Tencent, centered around product-focused "decentralized" rapid iterations.

In 2019, Tencent established the Open Source Collaboration Committee. Through internal open-source collaboration, it organized different teams working on similar technology products to collaborate.

TDesign is the collaborative outcome of frontend and design under Tencent's open-source collaboration, with the aim to jointly build a comprehensive and versatile design system and component library.

Development of TDesign.

TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.

Many participants started by trying out the component library in their personal projects, advancing to submit their first Issue, then their first Feature MR, and gradually becoming involved in Code Review and solution-formulating tasks, eventually turning into core contributors. In the past year, TDesign has closed 1k+ issues and conducted 5k+ Code Reviews to maintained a weekly iterative release of new versions.

TDesign currently supports multiple platforms and mainstream front-end UI framework. Desktop versions for Vue2, Vue3, and React, as well as mobile versions for WeChat Mini Programs, have been launched as stable versions. Mobile React and QQ Mini Program versions have been released the Alpha versions for internal testing.

Why Open-source

Through open sourcing, TDesign aims to refine a complete and user-friendly component library and cultivate a rich design ecosystem.

With the help of the community, TDesign aspires to maintain ongoing communication with more product designers and developers, evolving into a more valuable product.

Open-source marks a new beginning for TDesign.

For TDesign's subsequent development plan, please refer to the TDesign upcoming plans.

Features

Comprehensive

• Support Vue 2、Vue 3、React for Desktop Application and Vue 3、Wechat MiniProgram for Mobile Application.
• Provide a wide variety of design resources, including Figma, Adobe XD, Sketch, etc.
• Provide auxiliary design tools, such as Sketch Plugin，and support using in CoDesign、Pixso、即时设计、墨刀 as well.

Consistency

• Maintain a unified design values and visual style, helping products maintain a consistent user experience across different platforms during the design and development process.
• Consistently defined and implemented APIs across various tech stacks provide an advantage when building unified, cross-platform, and cross-tech stack applications.

Usability

• Extract Tencent design experience from various business scenarios and offer universal design guidelines to lower the barriers to entry.
• Support extend the design styles by using Design Token.
• Offer TDesign Starter Kit to help developers get started.

Documentations

• Introduce
• Contributing
• Components
• Starter Kits
• Design Guideline

Read more in the official website of TDesign.

Design Guidelines

TDesign distills Tencent's years of internal design experience into professional design guidelines, providing universal design solutions.

• Design Values
• Color
• Font
• Motion
• Icon
• Layout
• Dark Mode

For more information, refer to the guide section of each component, such as Button.

Design Resources

• Figma
• Sketch、Axure、Adobe XD
• TDesign Maker

Contributors

❤️ Thanks for all the TDesign contributors：

Contributing Guide

Any contributions to TDesign are welcome. Please read 《contributing for TDesign》 for more information.

License

The MIT License. Please see the license file for more information.