Khi một đội ngũ phát triển đồng thời duy trì một ứng dụng web React và một ứng dụng di động React Native, việc giữ cho giao diện người dùng nhất quán trở thành thách thức lớn. Một Design System được xây dựng tốt không chỉ giúp tái sử dụng component mà còn giảm thiểu lỗi giao diện và tăng tốc độ phát triển. Dưới đây là quy trình thực tế mà nhiều đội ngũ đã áp dụng thành công. 1. Xác định token thiết kế chung - Màu sắc, khoảng cách, typography, border radius, shadow được định nghĩa trong file JSON (ví dụ: design-tokens.json). - Sử dụng công cụ như Style Dictionary để xuất token sang cả CSS variables (cho web) và JavaScript object (cho native). 2. Cấu hình Tailwind CSS cho web - Tạo tailwind.config.js đọc token từ design-tokens.json. - Định nghĩa các utility class như bg-primary-500, text-heading-lg dựa trên token. Điều này đảm bảo bất kỳ thay đổi nào ở token đều phản ánh tức thì trên web. 3. Cấu hình React Native Paper cho mobile - Tạo theme object tuân thủ cấu trúc của Paper (colors, fonts, spacing). - Map token tương ứng: colors.primary = tokens.color.primary[500], fonts.heading = { fontFamily: tokens.font.family.heading, fontSize: tokens.font.size.lg }. 4. Xây dựng component library chung - Viết component ở mức logic thuần túy (ví dụ: Button, Input, Card) trong thư mục packages/ui-core. - Mỗi component nhận props chung (variant, size, disabled) và render bằng cách sử dụng style từ token. - Đối với web, component wrapper dùng className từ Tailwind; đối với native, wrapper dùng style object từ theme Paper. 5. Tài liệu hóa và kiểm thử trực quan với Storybook - Cài đặt Storybook cho cả web và React Native (storybook-react-native). - Viết story cho từng variant của component, sử dụng decorators để bọc theme provider. - Bật addon-controls để designer có thể thay đổi token trực tiếp và xem kết quả ngay lập tức. 6. Quy trình phát hành và versioning - Sử dụng changesets để quản lý version của package ui-core. - Mỗi lần merge vào main, CI tự động publish lên npm registry nội bộ. - Ứng dụng web và native chỉ cần cập nhật dependency "@myorg/ui-core" để nhận component mới. Lời khuyên thực chiến: - Bắt đầu nhỏ: chỉ token màu và typography, sau đó mở rộng dần. - Đặt lint rule cấm hard‑code giá trị màu, spacing trong component. - Tự động hóa kiểm tra visual regression (Chromatic cho web, Loki cho native) trong pipeline CI. - Tổ chức workshop định kỳ giữa designer và developer để đồng bộ token. Với cách tiếp cận này, đội ngũ có thể đảm bảo trải nghiệm người dùng liền mạch trên cả hai nền tảng, giảm thiểu sự chênh lệch giao diện và tiết kiệm thời gian bảo trì dài hạn.