Chuyển design token trong Figma sang Tailwind: Màu sắc, Typography & Spacing

Trả lời nhanh: một giá trị màu/text/spacing trong Figma ánh xạ sang Tailwind bằng cách đối chiếu với chính thang utility của Tailwind — bước spacing gần nhất, màu gần nhất, cỡ chữ khớp nhất. Khi một giá trị nằm ngoài thang đó, đầu ra sẽ fallback về một class arbitrary-value như bg-[#f4f4f5] thay vì tự bịa ra một màu theme mới không tồn tại trong config của bạn.

"Design token" trong một file Figma, cụ thể là gì

Trước khi ánh xạ có ý nghĩa, cần nói rõ điều gì được tính là token so với một giá trị one-off trong Figma:

• Color style — một fill đã lưu, có tên (ví dụ "Gray/100") được áp dụng nhất quán trong toàn file, khác với một giá trị hex thô chọn một lần rồi không dùng lại.
• Text style — một tổ hợp font, size, weight và line-height đã lưu, được áp dụng nhất quán cho heading hoặc body text.
• Giá trị spacing — thường không được "lưu" thành style theo cùng cách, nhưng là các con số gap/padding Auto Layout nhất quán được dùng lặp lại qua nhiều frame.

Việc ánh xạ sang Tailwind hoạt động tốt nhất khi file Figma thực sự dùng những thứ này nhất quán. Một file mà mọi button đều dùng chung color style "Primary" đã lưu sẽ chuyển gọn gàng thành một class Tailwind dùng lại ở mọi nơi. Một file mà năm button mỗi cái có một màu xanh one-off hơi khác nhau sẽ chuyển thành năm giá trị Tailwind hơi khác nhau — vì đó đúng là những gì thiết kế thực sự chứa, không phải lỗi của quá trình chuyển đổi.

Giá trị được quy về thang của Tailwind như thế nào

Giá trị cốt lõi của Tailwind là một thang giới hạn, định sẵn cho spacing, màu sắc và typography — không phải một bảng màu mở. Chuyển vào thang đó nghĩa là đối chiếu, không phải bịa ra:

Đây là một sự phân biệt có chủ đích: đầu ra Tailwind của MarkupGen đối chiếu với thang mặc định thật của Tailwind thay vì sinh ra một theme tailwind.config tùy chỉnh để ép mọi giá trị phải "vừa khít". Điều đó giữ cho đầu ra trung thực với giá trị thật của thiết kế — một màu lệch thang hiện ra dưới dạng class arbitrary-value, đó là một tín hiệu hữu hình đáng để trao đổi với designer xem liệu nó có nên được nắn về bảng màu chung hay không, thay vì một lỗi làm tròn âm thầm.

Điều này có ý nghĩa gì khi review bản xuất

• Class arbitrary-value là một tín hiệu, không phải lỗi. Một cụm class bg-[#...] trong đầu ra thường có nghĩa là chính thiết kế có những màu one-off gần giống nhau nên được gộp thành style dùng chung — đáng để báo lại cho design thay vì chỉ "sửa" trong code.
• Kiểm tra độ nhất quán spacing giữa các component lặp lại, vì thang của Tailwind làm tròn từng giá trị một cách độc lập — cùng một khoảng cách hình ảnh ở hai frame khác nhau nên ra cùng một class nếu thiết kế dùng cùng một con số.
• Nếu dự án đã có theme tailwind.config riêng, hãy đối chiếu các giá trị arbitrary sinh ra với nó — một màu trông có vẻ lệch thang so với bảng màu mặc định của Tailwind có thể đã là một màu được đặt tên trong config của chính bạn, đáng để thay tay vào.

Để xem toàn bộ quy trình — xuất bằng plugin, AI sinh code, chỉnh sửa, chọn định dạng đầu ra — xem Figma to Tailwind CSS: A Practical Conversion Guide.

Thử ngay trên thiết kế của bạn

Cách nhanh nhất để thấy màu sắc và spacing của file bạn chuyển đổi nhất quán đến đâu là chạy thử một frame thật qua công cụ. Dùng thử MarkupGen miễn phí, hoặc xem trang công cụ chuyển Figma sang Tailwind để biết những gì bạn nhận được.