As a designer in the Core Experience Team, I initiated and led the rebuilding of the QQ Design Component Library and played a key role in facilitating the collaborative process for QQ component development.
This project presentation draws from my previous project situation and experience. The goal is to share insights on building a design component library, focusing on creating a system that is collaborative, open, and efficient to maintain.
The presentation covers four main areas:
Core Structure of the Component Library
Based on Design Tokens
Expansion Capabilities
Collaborative Process for Maintaining the Library
QQ Design
Component
Library
An overview of the QQ component library, including standardized usage instructions, collaborative guidelines, and clear directions for both developers and designers.
Designers should regularly note updates in the component library's log to aid in its maintenance.
Serves as the component library directory, indicating each component’s development status, with clickable items that link directly to the specific component pages.
Atomic styles define the foundational design language of QQ, encompassing elements such as Icons, Colors, Font Sizes, Corner Radii, Grid Systems, and Animation Principles.
Includes Standard Primary Interfaces, Navigation Components, Content Components, Action Components, and Feedback Components. Due to space constraints, I will list only two examples from each category.
Content components include List View, Dividers, User Avatars, Tags, Chat Bubbles, Text Blocks, Bubble Tags, Banners, and QR Codes. Here, the styles of the List View, Avatar, and Chat Bubble components are illustrated.
This part includes Buttons, Switches, Checkboxes, Pickers, Text Fields, Keyboards, Action Sheets, Share Sheets, Popovers, Bottom Operation Tabs, Player Buttons, Carousel Indicators, and Player Progress Bars. This section provides examples of Buttons, Pickers, Share Sheets, and Player Buttons.
Feedback components include Toast, Notifications Bars, Info Tooltips, Dialogs, Loading Indicators, Badges, Authorization Sheet, Empty States, and Delete Actions. Here, we’ve highlighted the component styles for Toast, Notification Bar, Info Tooltip and Loading.
A Design Token is a standardized naming entity in the design system. It represents a set of uniform parameters for design attributes, such as HEX color values, spacing, sizes, etc, as a common language between design and development.
A token is composed of two parts: a coding name representing its type and a defined value associated with it. Tokens encapsulate style names in a fixed structure to achieve a streamlined effect.
1). Maintain a single source of design parameters to achieve comprehensive control over the design. One change applies to all instances.
2). Automatic theme adaptation without the need for additional design exports.
3). Reduce redundant resource creation and uploads by minimizing the duplication of design assets, preventing excessive duplication of resources within the system.
The color tokens in QQ are not single colors but represent a mapping of multiple color schemes. This includes two standard mode themes, nine experience mode themes, and premium themes. When a color token is used, all themes are automatically applied.
Maintain the independence of elements. For example, although icons and text might share a color, keeping them as separate Tokens ensures the ability to modify them independently.
Enable compatibility across diverse themes and scenarios. While multiple elements may share a color in one theme, in other themes, these elements might require different colors. Therefore, when using a color Token, it's essential to consider the scenario and theme compatibility comprehensively, rather than focusing solely on the color itself.
Uniqueness: Each icon Token in QQ represents one icon, maintaining uniqueness.
Consistency and Optimization: To maintain visual consistency and reduce installation size, all icons in practical design should use the icons available in the icon library.
Token Structure: In actual design, each icon is composed of two associated Tokens: one for the icon structure and another for the icon's color.
Mobile Icon Size Specifications: The icon library provides one standard size, 24px, which can be scaled to four sizes: 12px, 16px, 20px, and 40px.
The development status of each component is visible in the header.
In the internal branch version of the app, you can access the QQ Component Library in the ‘Settings’ section to view components’ effects.
You can click the link to navigate to the QQ Design System website for relevant code.
Maintain Consistency: Wherever possible, use existing components to ensure consistency. Avoid adding new styles unless necessary.
Ownership of Proposals: Whoever proposes the addition of a new component style is responsible for delivering the design proposal and leading the evaluation and development process.
Process for New Component Requests: If a new component style is deemed essential, please follow the workflow illustrated below.
