Thiết kế một Design System dùng chung cho cả React Web và React Native giúp đội ngũ duy trì giao diện nhất quán, giảm thiểu trùng lặp mã và tăng tốc độ phát triển. Dưới đây là quy trình thực tế đã áp dụng thành công trong nhiều dự án. 1. Xác định phạm vi và nguyên tắc cốt lõi - Liệt kê các thành phần UI cần thiết: button, input, card, modal, navigation, typography, color palette, spacing, iconography. - Quy định nguyên tắc: mobile‑first, accessibility (WCAG 2.1 AA), theming (light/dark), responsive breakpoints cho web và safe‑area cho native. 2. Cấu trúc thư viện chung (monorepo) - Sử dụng Nx hoặc Turborepo để quản lý nhiều package trong một repo. - Package `design-tokens`: định nghĩa màu, font, spacing, border‑radius dưới dạng JSON/TS, xuất ra cả CSS variables và React Native StyleSheet. - Package `core-components`: các component primitive (Box, Text, Pressable) viết bằng TypeScript, không phụ thuộc vào platform. - Package `web-components` và `native-components`: wrapper platform‑specific (styled‑components cho web, StyleSheet cho native) sử dụng core-components. 3. Triển khai theming với Context + useReducer - Tạo `ThemeProvider` bọc toàn bộ ứng dụng. - State theme chứa `mode` (light/dark) và `tokens` (được merge từ design-tokens). - Cung cấp hook `useTheme()` để component con truy cập token mà không import trực tiếp file JSON. 4. Xử lý sự khác biệt platform - Sử dụng `Platform.select` (React Native) và CSS media query (web) cho responsive. - Với component phức tạp như `Modal`, viết hai implementation riêng nhưng cùng API (props) để consumer không cần biết platform. - Đặt test snapshot cho từng platform để đảm bảo giao diện không bị lệch. 5. Tài liệu và Storybook - Cấu hình Storybook cho cả web và React Native (storybook/react-native). - Viết story cho từng variant của component, hiển thị cả light/dark mode. - Tự động sinh tài liệu từ JSDoc/TSDoc để đội ngũ thiết kế và dev tra cứu nhanh. 6. Quy trình phát hành và versioning - Sử dụng Changesets để quản lý version từng package độc lập. - Publish lên npm private registry với tag `latest` và `next` cho canary. - CI chạy lint, type‑check, unit test, visual regression (Chromatic) trước khi merge. 7. Lời khuyên thực chiến - Bắt đầu nhỏ: chỉ token + 5 component cốt lõi, mở rộng dần. - Đặt lint rule cấm import token trực tiếp từ file JSON, buộc dùng `useTheme()`. - Đánh giá định kỳ (mỗi sprint) sự nhất quán giữa web và native qua checklist UI. - Khuyến khích designer đóng góp token qua Figma plugin xuất JSON, giảm thiểu handoff thủ công. Với cách tiếp cận này, đội ngũ có thể tái sử dụng đến 80% mã UI, giảm thời gian tích hợp feature mới và đảm bảo trải nghiệm người dùng liền mạch trên mọi nền tảng.