Best Practices

This section compiles usage recommendations for Tencent Design to help individual designers and teams build efficient design workflows.

File Organization

Naming Conventions

Consistent naming keeps team collaboration smooth:

[Version/Status] - [Business line/Module] - [Page/Feature]

Examples:
v2.3 - Shop - Product Detail Page
Draft - Login Flow - New Design Concept
Final - Homepage - 2024 Q3

File Hierarchy

Team
└── Project (organized by business line or product module)
    ├── Design files (main deliverables, corresponding to real pages)
    ├── Design system (component library, color tokens, typography specs)
    └── Explorations (drafts, concept work — no strict naming needed)

---

Building a Component Library

Atomic Design Principles

Build components in a hierarchy from "atoms → molecules → organisms":

1. Atoms: Base styles — colors, typography, spacing tokens
2. Molecules: Basic components — buttons, inputs, tags
3. Organisms: Composite components — navigation bars, cards, modals

Component Naming Convention

[Type]/[Name]/[State or Variant]

Examples:
Button/Primary/Default
Button/Primary/Hover
Button/Primary/Disabled
Input/Text/Default
Input/Text/Error

Publishing Shared Styles

Publish common colors and text styles as 「Shared Styles」 for team-wide reuse:

1. Right-click a color fill → 「Create Color Style」
2. Select a text layer → click 「+」 in the right panel to create a text style
3. In other files, use 「Import Styles」 to reuse them

---

Team Collaboration Workflow

Recommended Workflow

1. Product team finalizes requirements doc
      ↓
2. Designer creates draft concepts in "Explorations" folder
      ↓
3. Share with link and invite product/engineering for review via comments
      ↓
4. Revise based on comments — use version history to mark key milestones
      ↓
5. Once approved, move to the formal project and label as "Final"
      ↓
6. Engineering views specs in "Viewer mode" or uses MCP to auto-fetch design data

Comment Best Practices

• Be specific: identify the issue and state the desired change
• Reply promptly and mark comments as 「Resolved」 to keep threads clean
• Use @member to ensure the right person is notified

---

Handoff to Engineering

Viewer Mode

Invite engineers as 「Viewers」 — they can:

• View exact parameters for all layers (dimensions, colors, spacing)
• Copy CSS code snippets with one click
• Download exported assets

Using Design MCP

For teams using AI coding tools, Design MCP is recommended:

• AI agents directly read design file data
• Automatically generate corresponding frontend code
• Reduce manual measurement and communication overhead

---

Performance Tips

Large File Optimization

• Keep single files under 500 layers — split into multiple files when exceeded
• Use component instances instead of duplicating layers to reduce file size
• When exporting images, choose the appropriate resolution — avoid unnecessarily high DPI

Multi-page Management

• Related pages belong in the same file (e.g., a complete user flow)
• Independent business modules belong in separate files, organized by project
• Periodically archive inactive files to keep the workspace tidy