How TDesign Uses Figma Variants to Streamline Multi‑Role Design Systems

1.0 Preface

An excellent design system frees designers from repetitive work, enabling more innovation and better product experiences. Tencent's SMAD team joined the TDesign effort to build a system that serves both designers and developers.

2.0 Why Update Figma Design Resources Early

TDesign was open‑sourced on 2021‑12‑21, providing resources for the four major design tools. Updating Figma resources ensures users have the latest, most complete assets, maintaining design quality and standards.

Figma’s online collaboration and branch merging greatly improve large‑scale design system workflows compared to Sketch.

3.0 Fully Utilizing Variants

Design resources must be built with a development‑system mindset, considering multiple user roles beyond designers.

3.1 Shift in User Groups

After open‑sourcing, TDesign serves product managers, UI developers, front‑end and back‑end engineers, who need visual assembly of components to ensure standards.

Key role needs:

Product: component types for class‑based assembly and simple layout tweaks.

Design: style focus, class‑based assembly, demos.

Development: component capabilities, API‑aligned assembly.

3.2 Simplifying Design Resource Complexity

Design resources must align visual specifications with component APIs across frameworks.

3.2.1 Unify Four Framework APIs

Figma Variants let designers configure component types, sizes, and states, mirroring API props. Example: TDesign button component uses theme for theme and variant for type.

3.2.2 Enable Full‑Role Usage

Developers can map APIs directly to variants; designers can modify styles via master components; product managers can assemble classes without deep code knowledge.

3.2.3 Massive Variant Quantity

For buttons alone, TDesign created 2,680 variants; overall the system contains roughly 20,000 component variants, yet users typically reference only a few, dramatically simplifying multi‑state management.

4.0 Supporting Figma’s Latest Features

4.1 AutoLayout 4.0

AutoLayout reduces empty frames and enables absolute positioning, simplifying nested menus and avatar stacks.

Negative spacing improves component stacking; ordering controls content expansion intelligently.

4.2 Individual Strokes

Stroke updates replace shadow‑based borders, making components like radio groups and tabs more consistent with code.

5.0 More Reasonable Nesting Hierarchy

Components are categorized by reuse level (high‑reuse base, low‑reuse base, composite, custom composite) to maintain consistency as the system grows.

6.0 Conclusion

TDesign's desktop design resources were open‑sourced to the Figma community on May 21, offering a simple, efficient way to build systems around standards and efficiency. Ongoing efforts aim to migrate all code capabilities into design resources, with live demos available on the TDesign website.

For more details, visit the Figma community file: https://www.figma.com/community/file/1053279236128724321