ldhnam
Công nghệ, kinh tế, và những suy nghĩ rời rạc.Technology, economics, and scattered thoughts.
← Ghi chú← Notes

Design SystemDesign System

15 ghi chú15 notes

⌕
  1. 01Giới thiệu về Design SystemIntroduction to Design SystemsMột design system là nguồn tham chiếu duy nhất (single source of truth) định hình ngôn ngữ và các thành phần của một sản phẩm: tập hợp các quy tắc, nguyên tắc và khối xây dựng dùng chung, giúp các sản phẩm số của một tổ…A design system is the single source of truth that shapes the language and components of a product: the shared rules, principles, and building blocks that make an organization's digital products look and feel like they…19 Th7, 2026Jul 19, 2026
  2. 02Design Language & Nguyên tắc thiết kếDesign Language & PrinciplesMột design system chỉ mạch lạc khi những ý tưởng đứng sau nó mạch lạc. Trước khi ai đó vẽ một cái nút hay đặt tên cho một color token, cả team cần thống nhất sản phẩm nên "cảm" như thế nào và quy tắc nào dẫn dắt mọi…A design system is only as coherent as the ideas behind it. Before anyone draws a button or names a color token, a team needs to agree on what the product should feel like and what rules guide every decision made in its…19 Th7, 2026Jul 19, 2026
  3. 03Design Token & Nền tảng thị giácDesign Tokens & Visual FoundationsLợi ích ở đây không phải là thẩm mỹ, mà là vận hành. Nếu không có token, một lần rebrand hay yêu cầu "hỗ trợ dark mode" đồng nghĩa với việc grep tìm mã hex trên hàng trăm file, trong ba codebase khác nhau, và hy vọng…A design token is the smallest, named unit of a design decision: a color, a spacing value, a font size, a border radius, an animation duration. Instead of a developer typing #3B82F6 into a stylesheet and a designer…19 Th7, 2026Jul 19, 2026
  4. 04Component cốt lõi: Input & Hành độngCore Components: Inputs & ActionsMọi design system đều có một nhóm nhỏ component xuất hiện ở gần như mọi màn hình: Button, text Input, Checkbox, Radio, Switch, Select. Đây chính là các component cốt lõi (core components), và chúng xứng đáng với cái tên…Every design system has a small set of components that appear on almost every screen: buttons, text inputs, checkboxes, radios, switches, selects. These are the core components, and they earn that name not because they…19 Th7, 2026Jul 19, 2026
  5. 05Component cốt lõi: Nội dung & FeedbackCore Components: Content & FeedbackNếu các component input và action (button, field, select) là cách người dùng nói cho hệ thống biết họ muốn gì, thì các component nội dung và feedback là cách hệ thống "nói lại": hiển thị thông tin, gom nhóm thông tin…If input and action components (buttons, fields, selects) are how users tell the system what they want, content and feedback components are how the system talks back: they display information, group it, and tell the…19 Th7, 2026Jul 19, 2026
  6. 06Guideline Component & Mẫu tài liệuComponent Guidelines & Documentation PatternsMột component chỉ hữu ích ngang với phần guidance đi kèm nó. Cứ thử ship một Select component được code đẹp, prop rõ ràng, accessibility tốt, nhưng không có bất kỳ tài liệu hướng dẫn nào — chỉ trong một quý, hai chuyện…A component is only as useful as the guidance that surrounds it. Ship a beautifully engineered Select component with clean props, solid accessibility, and zero written guidance, and two things happen within a quarter…19 Th7, 2026Jul 19, 2026
  7. 07Accessibility & Thiết kế bao trùmAccessibility & Inclusive DesignAccessibility là thực hành thiết kế và xây dựng sản phẩm sao cho người dùng có khiếm khuyết — về thị giác, thính giác, vận động, nhận thức, hoặc gặp hạn chế tình huống (situational) — vẫn có thể sử dụng được. Ở phần lớn…Accessibility is the practice of designing and building products that people with disabilities — visual, auditory, motor, cognitive, or situational — can actually use. In most organizations, accessibility is treated as…19 Th7, 2026Jul 19, 2026
  8. 08Xây dựng Design SystemBuilding a Design SystemXây dựng một design system thực chất là một bài toán quản lý thay đổi (change management) được ngụy trang dưới hình hài một bài toán thiết kế. Các thư viện Figma, token, và code component là phần đầu ra hữu hình, nhưng…Building a design system is a change-management problem disguised as a design problem. The Figma libraries, tokens, and component code are the visible output, but the hard part — the part that actually determines…19 Th7, 2026Jul 19, 2026
  9. 09Tooling & Quy trình Design-to-DevTooling & Design-to-Dev WorkflowMỗi lần hand-off giữa designer và engineer là một cơ hội để mọi thứ trôi dạt (drift) khỏi nhau. Không có vocabulary chung, designer vẽ một button với padding 12px và màu fill #3B82F6; engineer lại build nó với 10px và…Every hand-off between a designer and an engineer is an opportunity for drift. Without a shared vocabulary, a designer draws a button with 12px of padding and a #3B82F6 fill; the engineer builds it with 10px and #3B72F5…19 Th7, 2026Jul 19, 2026
  10. 10Content Design & Writing GuidelinesContent Design & Writing GuidelinesMọi design system đều bỏ khá nhiều công sức để đảm bảo một "primary button" trông giống nhau ở mọi nơi — cùng corner radius, cùng padding, cùng color token. Nhưng rất ít team bỏ công sức tương đương để đảm bảo cái…Every design system spends real effort making sure a "primary button" looks the same everywhere — same corner radius, same padding, same color token. Far fewer spend the same effort making sure that button says the same…19 Th7, 2026Jul 19, 2026
  11. 11Governance & Đóng gópGovernance & ContributionMột design system là một sản phẩm dùng chung. Ngay khi có nhiều hơn một team phụ thuộc vào nó, mỗi thay đổi đều có cái giá phải trả bởi những người không có mặt lúc quyết định được đưa ra — một token bị đổi tên làm hỏng…A design system is a shared product. The moment more than one team relies on it, every change carries a cost that is paid by people who were not in the room when the decision was made — a renamed token breaks a dozen…19 Th7, 2026Jul 19, 2026
  12. 12Versioning & Quản lý ReleaseVersioning & Release ManagementDesign system không chỉ là một thư viện nội bộ bình thường — nó là dependency được toàn bộ các team sản phẩm trong tổ chức dùng chung cùng một lúc. Khi một service backend thông thường ship một breaking change, chỉ một…A design system is not just another internal library — it is a dependency shared by every product team in the organization at once. When a typical backend service ships a breaking change, one team feels the pain. When a…19 Th7, 2026Jul 19, 2026
  13. 13Adoption, Cộng đồng & Hỗ trợAdoption, Community & SupportMột design system không ai dùng thì không phải là một design system — nó chỉ là một component library nằm im trong registry, một file Figma không ai mở, và một dòng ngân sách mà sớm muộn ai đó sẽ đặt câu hỏi. Xây dựng…A design system that nobody uses is not a design system — it is a component library sitting unused in a registry, a Figma file nobody opens, and a line item in a budget review that someone will eventually question…19 Th7, 2026Jul 19, 2026
  14. 14Đo lường thành công: Analytics & TestingMeasuring Success: Analytics & TestingMọi design system đều phải cạnh tranh ngân sách với các tính năng tạo doanh thu trực tiếp — một luồng checkout mới, một gói giá mới, một tích hợp mới — và trong cuộc cạnh tranh đó, đội design system nào không trả lời…Every design system competes for budget against features that generate revenue directly — a new checkout flow, a new pricing tier, a new integration — and in that competition, a design system team that cannot answer…19 Th7, 2026Jul 19, 2026
  15. 15Localization & Cân nhắc nâng caoLocalization & Advanced ConsiderationsPhần lớn design system, mà không ai chủ đích quyết định như vậy, được xây dựng cho một ngôn ngữ (thường là tiếng Anh Mỹ), một hướng đọc (trái sang phải), các quy định pháp lý của một khu vực, và các liên tưởng màu sắc…Most design systems are, without anyone deciding it deliberately, built for one language (usually US English), one reading direction (left-to-right), one region's legal norms, and one culture's color connotations. Those…19 Th7, 2026Jul 19, 2026