Build Scalable Design Components: Practical Steps for Usability & Maintenance

Introduction

In 2025, we still discuss component‑building methodologies, but with new insights. Previously we introduced Design System 1.0 “unification” to improve internal consistency and user experience. This article explores practical ways to enhance asset consumption efficiency by building a robust component library.

We define a “good design component” as one that is easy to understand, easy to use, and easy to maintain, especially in the context of Baidu Search where every design detail can affect business metrics.

Three "Good" Principles

Good components must be understandable , usable , and maintainable . These criteria guide the entire component‑library upgrade process.

Construction Methodology

Start from zero with a multi‑layer nesting approach: a component contains nested variants (instances). This reduces repetitive work and simplifies both building and unbinding processes.

Apply the principle “flexible base, convergent top”: the lower‑level variants are diverse enough to cover most states, while the upper‑level component enforces design guidelines, preventing out‑of‑spec designs.

The building workflow consists of three steps: scene collection and analysis, basic variant group construction, and advanced variant group expansion . A video component case demonstrates how to apply these principles.

Collect scenarios, define all possible variants, and organize them into a detailed table that lists each variant across dimensions such as width, height, quantity, and priority. Distinguish common dimensions, typical features, and business‑specific features.

Follow the order “common‑>typical‑>business” to reduce cognitive load and keep the base component flexible.

For the video component, the prioritized variants are:

Video size and combination (most intuitive for users)

Playback state (common to all variants)

Auto‑play (business‑related, optional)

Advanced components (few sizes, built after basic ones)

Construction order:

Cover slot (part of playback state)

Playback state

Basic component sizes and combinations

Advanced components

Usage and Inspection

Insertion methods include direct asset panel drag‑and‑drop, copying from design specs, or swapping instances. Naming conventions that combine Chinese, English, and numbers improve fuzzy search. Adding a “Preferred” sub‑component helps prioritize variants during swaps.

Provide clear, visible configuration items with explicit constraints (e.g., character limits) to reinforce design guidelines.

Maintain a flat component hierarchy: place the most representative variant at the top‑left of the component set, as Figma uses it for preview thumbnails.

Configuration Tips

Avoid overly complex grouping; prioritize visual presentation and simplify layer structures. Expose all customizable options with clear limits to aid designers in adhering to specifications.

Sort options logically to improve browsing efficiency.

Implement a “save modifications” mechanism for text properties so that edited text persists across subsequent configuration changes.

Maintenance

Leverage data monitoring via Figma’s component analytics dashboard to track usage and unbinding rates. High unbinding rates may indicate a component should become a template rather than a reusable component.

Conclusion

The Baidu Search design team shares insights on the demands for good design components and practical approaches to building and optimizing a component library, aiming to improve design asset consumption efficiency.