tích hợp figma
Figma đóng vai trò là tài liệu tham khảo trực quan — nó phản ánh token code để so sánh thiết kế. Hướng đồng bộ là code → figma, không bao giờ ngược lại. tokens.css luôn là nguồn chân lý duy nhất.
cấu trúc file figma
File Figma 1thay chứa 8 bộ sưu tập biến với tổng cộng 76 biến:
| Bộ sưu tập | Biến | Chế độ |
|---|---|---|
| Primitives | 22 | — |
| Color | 16 | Sáng / Tối |
| Spacing | 7 | — |
| Radius | 6 | — |
| Size | 10 | — |
| Opacity | 4 | — |
| Z-Index | 7 | — |
| Typography | 4 | — |
quy ước đặt tên trang
◆ name— trang tài liệu📖 name— trang đặc tả component🧪 name— trang thử nghiệm/sandbox🗑️ name— trang đã ngừng sử dụng/lưu trữ
quy trình làm việc của tác nhân với Figma MCP
Khi tác nhân cần tương tác với Figma:
- Kiểm tra code trước —
tokens.cssvà code component là nguồn chân lý - Dùng Figma MCP để so sánh trực quan — so sánh những gì Figma hiển thị với những gì code tạo ra
- Luôn phản ánh code → Figma — nếu có sự khác biệt, cập nhật Figma để khớp với code, không làm ngược lại
- Tuân theo quy ước
figma.md— về thuộc tính component, ràng buộc biến và quy trình xuất bản
xuất bản
Từ Figma: Bảng Assets (Alt+2) → Biểu tượng Sách → Publish Library → đánh dấu variables, text styles, effect styles.
bản đồ đồng bộ
Khi token thay đổi trong tokens.css, các biến Figma tương ứng cần được cập nhật:
--ref-blue-600→Primitives/reputa-blue/600--color-brand-600→Color/brand-primary--space-md→Spacing/md--radius-lg→Radius/lg