Quản lý design system với Storybook. Khởi đầu.
TLDR: Là một product designer, gần đây tôi đang áp dụng Storybook để quản lý hệ thống thiết kế (design system) cho đội ngũ của mình và các project phạm vi dự án của big-corp, giúp đồng bộ thiết kế trên Figma với mã code front-end một cách chặt chẽ. Bài viết này chia sẻ xu hướng mới trong việc sử dụng Storybook cho design system, phân tích ưu nhược điểm của công cụ này, đồng thời mô tả cách tiếp cận và cài đặt bước đầu mà tôi đã đã ứng dụng.
Xu hướng quản lý design system với Storybook
Trong vài năm gần đây, việc sử dụng Storybook để quản lý design system đang trở thành xu hướng phổ biến. Nhiều tổ chức lớn đã tin dùng Storybook để tạo một “live-library” cho các UI component, giúp đảm bảo tính nhất quán giao diện trên quy mô lớn. Kể đến như các tập đoàn truyền thông BBC, Guardian, các hãng công nghệ như Adobe, Microsoft, GitHub cho đến công ty dịch vụ như Airbnb đều dựa vào Storybook nhằm duy trì sự đồng bộ và hiệu quả cho giao diện người dùng của họ1.
Bên cạnh đó, nhiều design system tên tuổi trên thế giới cũng xây dựng dựa trên Storybook – ví dụ như Shopify Polaris, IBM Carbon, Salesforce Lightning. Điều này cho thấy Storybook đã trở thành một công cụ tiêu chuẩn trong hệ sinh thái design system hiện đại.
Vì sao là Storybook?
Single source of truth
Mỗi component có stories, tài liệu, trạng thái và ví dụ chạy thật—giảm độ lệch version giữa tài liệu design & development. Ví dụ: tài liệu cho Button của Equinor EDS.Làm việc sync/async hiệu quả
Deploy Storybook để mọi người xem, review bất kỳ lúc nào; kết nối trực tiếp Figma ↔ Storybook bằng plugin Storybook Connect để so sánh design vs implementation ngay trong Figma.
Xem thêm: Airbnb, eBay, Equinor
So sánh: No-code docs vs Storybook (code) vs Hybrid
| Tiêu chí | No-code docs (Abstract,Zeroheight, v.v.) | Storybook (code) | Hybrid |
|---|---|---|---|
| Mục tiêu chính | Trình bày guideline, nguyên tắc, ví dụ tĩnh | Thư viện component chạy thật + tài liệu tự sinh | Guideline giàu ngữ cảnh + component chạy thật |
| Đồng bộ Figma ↔ code | Thủ công/nhúng ảnh | Plugin Storybook Connect: liên kết story vào Figma | Kết hợp: embed Figma trong Storybook + link Storybook trong Figma |
| Hiệu quả review | Đọc nhanh, thiếu hành vi | Review trực tiếp trạng thái /props/interaction | Đọc guideline → mở story demo ngay |
| Kiểm thử & a11y | Hạn chế | Addon (a11y, interactions, visual testing/Chromatic) | Kết hợp: guideline + test tự động |
| Chi phí thiết lập | Thấp | Trung bình–cao (viết stories, CI deploy) | Vừa phải (setup chuẩn + quy trình) |
| Khi nên dùng | Team chưa có năng lực FE mạnh, cần khởi động nhanh | Team product ở mức maturity trung–cao, cần tính nhất quán cao | Tổ chức nhiều nhóm, cần scale và governance rõ ràng |
Kế hoạch tiếp cận
Mất từ 1 đến 2 tuần để tôi có thể nắm bắt “công nghệ lõi” của Storybook và cách tích hợp với tech-stack này. Dưới đây là một số đúc kết nhỏ để bắt đầu.
Thiết lập nhóm
- Chốt mục tiêu: giảm lệch Figma ↔ sản phẩm; chọn 5–7 component nền tảng (Button, Input, Typography, Color tokens…)2.
- Phân công vai trò: 1 designer “owner DS”, 1–2 FE làm “owner Storybook”, 1 QA/a11y reviewer3.
- Dựng template: Chuẩn hóa mẫu cấu trúc & docs format
Quy trình phù hợp maturity
- Vòng lặp “Design → Storybook → Review → Ship”: Design trên Figma → FE implement component + .stories → Designer review trực tiếp trên Storybook → QA check a11y/tests.
- Kết nối Figma ↔ Storybook bằng Storybook Connect, embed Figma trong Storybook Docs khi cần. Storybook +1
Khởi tạo và cấu hình bước đầu
Cài storybook mới nhất (version 9.1)
npx storybook@latest init
Add-ons: cần thiết cho designer và tester
"addons": [
"@chromatic-com/storybook",
"@storybook/addon-docs",
"@storybook/addon-onboarding",
"@storybook/addon-a11y",
"@storybook/addon-vitest",
"@storybook/addon-themes",
"@storybook/addon-designs",
],
Cài đặt bước đầu
- Khởi tạo: cài Storybook trong repo; bật Docs/Controls/a11y.
- Tokens: xuất color/typography từ Figma dạng .json → map vào tokens trong code (JS/TS/SCSS).
- Compponent đầu tiên: tạo <Button> kèm các biến thể (primary/secondary/disabled/loading)4 và stories tương ứng;
- CI/CD: thiết lập build & deploy Storybook (Chromatic hoặc static hosting nội bộ). Tôi thử nghiệm trước với Github Repo và buid site với Netlify để kiểm tra hiệu quả với các addons, từ đó rút ra được một số quy trình và khuôn mẫu thích hợp.
- Figma Connect: cài plugin, liên kết variant Figma → story; yêu cầu mọi màn mới phải có link story.
Các thách thức cần tiếp tục xử lý
- Storybook chưa hỗ trợ các framework native iOS và android, bạn cần phải sử dụng thêm các addons preview (tôi đã dùng thử 1 vài tools và thấy hiệu năng + tính linh hoạt chưa cao).
-
Chuẩn hóa và đồng bộ Tokens databases. Với quy mô và framework chưa được hỗ trợ, cần có công cụ tiền xử lý để làm cầu nối trung gian cho mội đầu vào và đầu ra (many-to-many).
-
Xây dựng nhịp design sync-up để hình thành thói quen cho design team, từ đó colaborate với dev và QA, hướng tới một quy trình automation toàn diện-đây chính là điểm mạnh của Storybook+Chromatic5.
