Tại sao cần token chung? Khi phát triển song song web và mobile, việc giữ nhất quán màu sắc, khoảng cách, typography và các giá trị động (shadow, radius) giúp giảm thiểu lỗi UI và tăng tốc độ triển khai. Token là đơn vị dữ liệu nhỏ nhất mô tả một quyết định thiết kế, ví dụ: color.primary = #0066FF, spacing.m = 16px. Cấu trúc thư mục gợi ý - packages/design-tokens - tokens.json // nguồn duy nhất - scripts/build.js // chuyển đổi sang định dạng từng platform - package.json Ví dụ tokens.json (đơn giản, không chứa logic) { "color": { "primary": "#0066FF", "background": "#FFFFFF", "text": "#1A1A1A" }, "spacing": { "xs": 4, "sm": 8, "md": 16, "lg": 24 }, "typography": { "fontFamily": "Inter, system-ui", "fontSize": { "base": 16, "lg": 20, "xl": 28 } } } Bước 1: Sinh file cho Web (CSS‑in‑JS / Tailwind) - Dùng script build.js đọc tokens.json, xuất ra file tokens.css.ts (export const tokens = {...}) hoặc tailwind.config.js.extend. - Trong Next.js import file CSS‑in‑JS hoặc cấu hình Tailwind để sử dụng token như theme.extend.colors.primary. Bước 2: Sinh file cho React Native (StyleSheet) - Cùng script build.js xuất ra tokens.rn.ts với giá trị phù hợp (số cho spacing, string cho color). - Trong component RN: import { tokens } from '@/design-tokens/tokens.rn'; StyleSheet.create({ container: { backgroundColor: tokens.color.background, padding: tokens.spacing.md } }). Bước 3: Hỗ trợ Dark mode - Mở rộng tokens.json thêm key "dark" cho color. - Script build tạo hai bộ token: lightTokens, darkTokens. - Web: dùng CSS variable hoặc Tailwind dark: prefix. - Mobile: dùng Appearance.getColorScheme() để chọn bộ token tương ứng. Bước 4: Kiểm tra tự động trong CI - Thêm job lint-tokens: chạy script validate.js so sánh tokens.json với schema JSON Schema (bắt buộc có color, spacing, typography). - Chạy test snapshot trên web và mobile để đảm bảo token không bị thay đổi ngẫu nhiên. Mẹo thực tế - Giữ tokens.json ở repo riêng (monorepo) để cả hai app cùng phụ thuộc. - Sử dụng changeset để versioning token; khi publish bản mới, cả web và mobile cập nhật cùng lúc. - Tài liệu hóa token bằng Storybook (web) và React Native Storybook (mobile) để designer và dev xem trực quan. Kết luận Việc tập trung token vào một nguồn duy nhất, tự động sinh mã cho từng nền tảng và gắn kiểm tra CI giúp đội ngũ duy trì giao diện nhất quán, giảm thiểu công việc lặp lại và dễ dàng mở rộng theme mới sau này.