Thời lượng: 1 tuần
Level: Advanced
Yêu cầu: Hoàn thành tất cả các module trước (1-9)
Tổng quan Module
Một Design System dù hoàn hảo về mặt kỹ thuật nhưng nếu không có ai sử dụng thì nó vẫn là thất bại. Module cuối cùng này sẽ dạy bạn cách "bán" (sell) Design System cho team của mình và cách viết tài liệu khiến mọi nhà phát triển đều muốn sử dụng.
Kết quả học tập
Sau module này, bạn sẽ:
- Xây dựng hệ thống tài liệu component với Storybook.
- Thiết lập quy trình Versioning và Release chuyên nghiệp (SemVer).
- Đo lường và thúc đẩy chỉ số Adoption Rate.
- Quản lý Breaking Changes mà không gây hoảng loạn cho các team product.
Bài 10.1: Storybook & Component Docs
Lý thuyết
Tài liệu cho Design System cần trả lời được 3 câu hỏi cho mỗi component:
- Dùng khi nào? (Usage): Bối cảnh sử dụng phù hợp.
- Dùng như thế nào? (API): Các props, states, events.
- Trông như thế nào? (Visual): Demo trực tiếp với các variants khác nhau.
Storybook Best Practices:
- Sử dụng MDX để trộn lẫn Markdown và JSX component.
- Thêm Auto-generated documentation từ TypeScript types.
- Tích hợp các addons: A11y, Viewport, Knobs/Controls.
Bài 10.2: Versioning & Release Process
Lý thuyết
Phân tích Semantic Versioning (SemVer):
MAJOR(x.0.0): Có breaking changes (vd: xóa một prop bắt buộc).MINOR(0.x.0): Thêm tính năng mới không gây lỗi cho bản cũ.PATCH(0.0.x): Sửa lỗi nhỏ.
Công cụ tự động hóa:
- Changesets: Giúp quản lý version cho monorepo.
- Semantic Release: Tự động hóa việc đánh số version dựa trên commit messages.
Thực hành: Adoption Dashboard Simulator
Hãy thử đóng vai trò là một Design System Lead để theo dõi các chỉ số quan trọng:
Bài 10.3: Adoption Strategy
Lý thuyết
Các giai đoạn của Adoption:
- Awareness: Team biết DS tồn tại (Newsletter, Demo).
- Exploration: Team bắt đầu đọc docs và cài đặt thử.
- Commitment: Team bắt đầu sử dụng cho project mới.
- Contribution: Team đóng góp ngược lại cho DS.
Mẹo thúc đẩy:
- Tạo sẵn các Boilerplate/Starter kits.
- Có cơ chế Office Hours để giải đáp thắc mắc trực tiếp.
- Ghi nhận và cảm ơn những người đóng góp (Contributor recognition).
Câu hỏi thảo luận
- Internal Sell: Làm sao để sếp đồng ý cho bạn làm Design System toàn thời gian?
- Documentation Debt: Docs luôn bị lỗi thời so với code. Giải pháp nào?
- Success Metrics: Ngoài Adoption rate, còn chỉ số nào đáng quan tâm (vd: Time-to-Hello World)?
Tổng kết Lộ trình
Chúc mừng! Bạn đã đi từ con số không đến việc làm chủ được toàn bộ quy trình xây dựng, vận hành và quản lý một Frontend Design System ở cấp độ doanh nghiệp.
Bước cuối cùng
Hãy bắt tay vào thực hiện Capstone Project để tổng hợp lại mọi kiến thức bạn đã học được.