A translated version of Tencent's TDesign for English viewers.
- It would be very hard for me to translate the images in the README to English, as I do not have a reliable way of extracting the text. If anyone has it, then please make a pull request.
- I'm not the best Chinese translator. I studied Chinese in school for over 2 years, so if you do not believe these translations are legible, please make an issue on Github Issues.
- This repository is a work in progress. So far, I do not have a lot done. But what I do wish to get done is
TDesign is a complete enterprise design system with component library solutions based on Vue / React / Applet and other technology stack component library solutions.
TDesign is more advantageous for building Design Unity / Cross-Ended Multi-Technology Stack front-end applications.
TDesign is a multi-repo
and TDesign has the following code repositories:
Repository | Description | Status |
---|---|---|
tdesign-vue | Vue 2.x Tech Stack | Beta |
tdesign-vue-next | Vue 3.x Tech Stack | Beta |
tdesign-react | React 16.x Tech Stack | Beta |
tdesign-angular | Based on Angular 10 Implementation | To Go Live |
Repository | Description | Status |
---|---|---|
tdesign-miniprogram | WeChat applet | Beta |
tdesign-mobile-vue | Vue 3.x Tech Stack | Beta |
tdesign-mobile-react | React 16.x Tech Stack | Alpha |
tdesign-flutter | 1.17.0 | To Go Live |
Repository | Description |
---|---|
tdesign | TDesign Main Repository and Documentation |
tdesign-icons | TDesign Public Icons |
tdesign-common | TDesign Public Styles |
Repository | Description |
---|---|
tdesign-starter-cli | Scaffolding for TDesign Solutions |
tdesign-vue-starter | tdesign-vue based solutions |
tdesign-vue-next-starter | tdesign-vue-next based solutions |
tdesign-react-starter | tdesign-react-based solutions |
tdesign-miniprogram-starter-retail | tdesign-miniprogram-based solutions for the retail industry |
In the past, Tencent had many design systems and component library type projects to do "decentralized" rapid iterations around products.
In 2019, Tencent established the Open Source Collaboration Committee to organize different teams of similar technology products to build together by means of internal open source collaboration.
TDesign is a product of collaboration between front-end and design fields under Tencent's open source collaboration. We expect to build a complete and universal design system and component library product together.
TDesign was created with the principle of open source collaboration, and the process of Collaborative Solution Discussion, Component Design and the process of API development, including the source code, is also completely open within the company and has received a lot of attention from internal development and design students. Regardless of the capacity of participation, TDesign follows the same principles of equality, openness and rigor.
Many students started from trying out the component library in their personal projects, to filing their first Bug Issue
, to filing their first Feature MR
, and finally became core contributors by gradually participating in Code Review
and solution development work. In the past year, TDesign closed 1k+ Issues
, made 5k+ CR
s, and kept weekly iterations releasing new versions.
The component library currently supports multiple ends and mainstream technology stacks, Vue2, Vue3, React on desktop and Vue3 on mobile, WeChat applets have released as a Beta
version, React on mobile, and QQ applets have released as an Alpha
internal test version.
Through open source, TDesign expects to continue to polish a more complete and easy-to-use component library and harvest a rich ecology.
With the community, TDesign expects to continuously communicate with more product designs and developers to become a more valuable product.
For TDesign, open source is a new beginning.
Please refer to the follow-up plan for the TDesign follow-up development plan.
- Support for Vue 2, Vue 3, React, Mobile Vue 3, WeChat applets, and development of other tech stacks such as Angular and Flutter (In Development)
- Provide rich and diverse [design resources](#design resources), including Figma, Adobe XD, Sketch, etc., freeing designers from repetitive work.
- Provide auxiliary design tools such as Sketch design plug-in, also support in Tencent CoDesign, Instant JSDesign, Pixso, Ink Knife and other common design tools in the market.
- Have unified values and visual style to help maintain a consistent product experience across the product design and development process.
- Consistency in API definition and implementation across tech stack products, more advantageous when building unified/multiple coverage/cross tech stack front-end applications.
- Distill the design experience of different businesses and scenarios, and provide common design guidelines to reduce the threshold of use.
- Support users to extend the design style by Design Token
- Provides a Starter Kit to help users get started quickly.
- Introduction
- Participating in Contributing
- Base Components
- Solutions
- Middle and Backend Design Guide
More documents are available at the TDesign Official Website.
TDesign distills and summarizes Tencent's years of internal design experience into professional design guidelines and provides universal design solutions.
Refer to the guidelines section for each component for more information, e.g. Button.
To enable efficient collaboration between development and design, TDesign contains a rich resource of reusable design components:
- Figma Design Resources
- Sketch, Axure, Adobe XD and other design resources
- TDesign Maker: A Sketch plugin from TDesign
❤️ Thanks to all TDesign contributors, who are more than 270 partners:
Please refer to the "How to Contribute" document.
If you have any questions, we suggest you to give feedback through Github Issues or scan the code to join the Weibo group.
TDesign uses the MIT protocol.