TDesign Enterprise Design System

TDesign is an enterprise-level design system developed by Tencent. It provides a unified design language, consistent visual styles, and out-of-the-box UI component libraries to streamline design and development workflows.

Key offerings include:

• UI Component Libraries: Available for various frameworks including Vue (2 and 3), React, WeChat Mini Programs, and Flutter (Alpha).
• Design Guidelines: Professional standards to ensure consistency across product management, design, and development.
• Design Assets: Reusable resources like color systems, font systems, motion design, icons, and layouts, compatible with tools like Figma, Sketch, Axure, and Adobe XD.
• Customization: Support for brand extension via Design Tokens and built-in theme switching (Light/Dark mode).

TDesign provides component libraries for various platforms and frameworks. Choose the repository that matches your tech stack:

Desktop Components

• Vue 3: tdesign-vue-next (LTS)
• React: tdesign-react (LTS)
• Vue 2: tdesign-vue (LTS)

Mobile Components

• WeChat MiniProgram: tdesign-miniprogram (LTS)
• Vue 3 Mobile: tdesign-mobile-vue (LTS)
• React Mobile: tdesign-mobile-react (Alpha)
• Flutter: tdesign-flutter (Alpha)
• UniApp: tdesign-uniapp (Alpha)

Shared Resources

• Main Repository: tdesign (Documentation and core)
• Icons: tdesign-icons (Monorepo for TDesign Icons)
• Common Styles: tdesign-common (Common styles and utilities)

TDesign provides several build output directories to accommodate different installation scenarios and module systems. Depending on your project setup, you may need to reference specific directories:

• dist: UMD (Universal Module Definition) builds. Best for direct browser usage via <script> and <link> tags or simple integration with Webpack/Rollup. Includes .min.js, .min.css, and .map files.
• es: ES Modules (ESM) build. Optimized for modern browsers and tree-shaking. Includes compiled CSS in a style directory.
• esm: ES Modules (ESM) build. Similar to es, but style/index.js links to uncompiled .less files.
• lib: CommonJS (CJS) build. The default entry point for many Node.js-based environments.

TDesign provides several build output directories to support different installation and module loading scenarios. Depending on your environment, you can choose from UMD, ESM, ES, or CommonJS formats:

• dist/ (UMD): A single bundled JS and CSS file. Best for direct use via <script> and <link> tags in browsers or for simple integration. Supports SSR.
• esm/ (ES Modules): Individual component files using ES Modules. Includes a style/index.js that links to uncompiled .less files. Supports tree-shaking and SSR.
• es/ (ES Modules): Individual component files using ES Modules. Includes a style/ directory containing compiled css.js, index.css, and index.js. Supports tree-shaking and SSR.
• lib/ (CommonJS): Individual component files using CommonJS. Best for Node.js environments or older build tools. Supports SSR.

The @tdesign/theme-generator project is organized into a UI layer and a core logic layer:

UI Layer

• float-dock: A floating entry point.
• panel-drawer: A side drawer containing various functional panels:
  • color-panel
  • font-panel
  • shadow-panel
  • radius-panel
  • size-panel

Core and Assets

• styles/: Contains *.min.css files derived from tdesign-vue. These files include :host selectors for Web Component compatibility and have removed td-brand-color-x tokens to allow direct synchronization with external theme colors.
• common/:
  • components: General components.
  • i18n: Internationalization.
  • theme: Core logic, including built-in theme templates and color algorithms.
  • utils: Utility functions.

To build interactive prototypes using the TDesign library:

1. Find Components: Locate desired components in the Libraries Panel or use the search bar to find components by name.
2. Add to Canvas: Drag and drop components directly onto your canvas.
3. Customize:
   • Ungroup components using shift+command+g (or the platform equivalent) to remove unnecessary elements or modify content.
   • Note that components like buttons and lists feature adaptive design and will automatically expand based on text width.
4. Preview: Click the Preview button in the top right corner to view your design in a browser. Components like buttons have built-in interactive states such as hover and click.

TDesign repositories use tdesign-common as a git submodule to store shared utility functions and UI development content (HTML structures and CSS styles) used across multiple frameworks like React and Vue. After cloning a repository, you must initialize the submodule to access these shared assets.

git submodule init && git submodule update

Navigation guides users through functional hierarchies and can be categorized into two types:

1. Site-wide Navigation (Global Navigation): Guides users through the largest modules of the entire system.

   • Recommended Component: Menu.

2. Area Navigation (Contextual Navigation): Guides and categorizes pages within a specific module.

   • Recommended Components: Affix, Anchor, Breadcrumb, Dropdown, Pagination, Steps, and Tabs.

Use the following command to build the @tdesign/site-components package for production.

npm build

Page navigation helps users find functions and understand information hierarchy. TDesign categorizes navigation into two types:

1. Site-wide Navigation (Global): Guides users to the most significant modules within the entire website. Use the Menu component.
2. Region Navigation (Situational): Categorizes pages within a single module. Recommended components include Affix, Anchor, Breadcrumb, Dropdown, Pagination, Steps, and Tabs.