Chuyển Figma sang CSS: Hướng dẫn thực tế

Trả lời nhanh: chuyển Figma sang CSS thuần nghĩa là dịch Auto Layout thành Flexbox, quy mỗi giá trị fill/spacing/type về đúng con số thật thay vì một xấp xỉ dựa trên utility class, và giữ đầu ra không phụ thuộc framework nào. Đây là lựa chọn đúng khi bạn muốn kiểm soát toàn bộ từng rule, không cần học, cài hay override một framework nào về sau.

Vì sao chọn CSS thuần thay vì framework

Mọi định dạng đầu ra mà MarkupGen hỗ trợ — CSS thuần, Tailwind, Bootstrap, Bulma — đều bắt đầu từ cùng một nguồn: cấu trúc và giá trị thật của frame Figma. CSS thuần đơn giản là định dạng không có gì chen giữa file của bạn và trình duyệt:

• Không cần học quy ước đặt tên class. Thang utility của Tailwind và các class component của Bootstrap rất mạnh, nhưng vẫn là một hệ thống phải nạp vào đầu. CSS thuần chỉ cần biết CSS.
• Không có trọng lượng framework. Ngay cả khi đã purge các class không dùng, một framework vẫn thêm một bước build và một dependency phải cập nhật. Bản xuất CSS thuần thì không có cả hai.
• Mọi rule đều chỉnh sửa được tại chỗ. Đổi một giá trị spacing chỉ là sửa một declaration, không phải lục tìm xem utility class nào ánh xạ đúng số pixel bạn muốn.

Đánh đổi ở đây chính là vấn đề mà Tailwind sinh ra để giải quyết: không có framework nào ép theo một thang chuẩn, giá trị spacing và màu sắc có thể trôi dạt thiếu nhất quán khi codebase lớn dần nếu không ai kỷ luật tái sử dụng đúng những con số cũ. Với một landing page đơn lẻ hay một site nhỏ, điều này hiếm khi là vấn đề. Với một sản phẩm lớn có nhiều người cùng đóng góp code, đáng để đọc Vanilla CSS vs Bootstrap vs Tailwind trước khi quyết định.

Những gì thực sự cần chuyển đổi

Một frame Figma mang nhiều cấu trúc hơn vẻ ngoài thoạt nhìn, và từng phần ánh xạ tới một phần cụ thể của CSS:

Không có gì trong danh sách này là lạ lẫm — đây chính là kiểu ánh xạ mà một developer vẫn làm bằng tay khi dựng lại thiết kế từng pixel một. Điểm khác biệt là làm việc này từ cấu trúc và giá trị thật của frame thay vì ước lượng bằng mắt trên một ảnh chụp màn hình.

MarkupGen sinh CSS như thế nào

Quy trình vẫn là bốn bước giống nhau bất kể định dạng đầu ra: xuất frame từ Figma bằng plugin MarkupGen, plugin này nắm bắt cấu trúc, style và hình ảnh cùng lúc; AI dựng markup từ chính cấu trúc thật đó thay vì xấp xỉ một tấm ảnh; tinh chỉnh nội dung, font hay layout trong trình soạn thảo tích hợp nếu có gì cần sửa; xuất gói code cuối cùng.

Riêng với CSS thuần, điều đó nghĩa là stylesheet sinh ra dùng đúng giá trị màu và spacing thật của frame thay vì làm tròn về một thang định sẵn của framework — một fill đặt là #3B82F6 ra đúng y hệt như vậy, không phải màu xanh Tailwind gần nhất. Auto Layout tự động ánh xạ sang cấu trúc Flexbox (xem Auto Layout to CSS để có bảng ánh xạ chi tiết từng thuộc tính), và hành vi responsive được sinh ra từ các ràng buộc resizing của frame thay vì phải thêm một bước thủ công riêng. Đầu ra HTML mặc định ưu tiên phần tử ngữ nghĩa thay vì <div> lồng nhau, điều này quan trọng cho khả năng bảo trì không kém gì cho accessibility và SEO.

Biến Figma trở thành CSS custom property

Biến (variable) trong Figma (màu sắc, type, spacing, radius, effect) là thứ gần nhất mà một file thiết kế có được với một design system, và về mặt khái niệm chúng ánh xạ sang CSS custom property — một khối :root gồm các cặp --name: value mà mọi rule trong stylesheet đều có thể tham chiếu tới. Như đã nói ở trên, đầu ra CSS của MarkupGen hiện tại quy mỗi thuộc tính về giá trị literal cho từng phần tử thay vì tự động sinh ra lớp biến :root đó, nên việc dựng mapping này là một bước thủ công. Tuy vậy đây là việc mang tính máy móc, một khi bạn đã nắm được pattern:

Một quy ước đặt tên đáng để tuân theo: phản chiếu đúng cấu trúc group/name của chính biến Figma (color/primary → --color-primary) thay vì bịa ra một cấu trúc song song khác, để hai bên luôn dễ đối chiếu khi thiết kế thay đổi. Khi các biến đã tồn tại dưới dạng custom property, hãy thay các giá trị literal đã sinh ra bằng tham chiếu var(--color-primary) trong CSS xuất ra.

Có hai giới hạn đáng biết trước khi dựa vào cách làm này: không phải biến Figma nào cũng ánh xạ gọn gàng sang một CSS property duy nhất — một biến được dùng cho cả màu viền lẫn màu text ở những chỗ khác nhau trong thiết kế không có nghĩa là chúng nên được giữ liên kết trong code nếu mục đích của chúng thực sự khác nhau. Và các biến responsive (một giá trị spacing thay đổi giữa các breakpoint) cần được khai báo lại bên trong từng media query liên quan, vì một custom property :root duy nhất không thể giữ nhiều hơn một giá trị cùng lúc — các frame theo từng breakpoint của Figma không tự động quy đổi thành các override responsive dựa trên cascade của CSS.

Rà soát CSS sinh ra trước khi triển khai

• Kiểm tra giá trị lệch chuẩn. Không có thang utility nào ép nhất quán, hãy quét tìm các giá trị gần giống nhau (padding: 15px cạnh padding: 16px ở chỗ khác) mà lẽ ra nên là cùng một con số.
• Xác nhận hành vi responsive ở các breakpoint thật, không chỉ ở kích thước mặc định của frame — hãy resize trình duyệt thay vì tin vào một ảnh chụp màn hình duy nhất.
• Xem lại tên class/selector nếu dự án có quy ước đặt tên riêng cần tuân theo (BEM, CSS Modules, v.v.) và chỉnh trước khi merge.
• Dùng trình soạn thảo tích hợp để chỉnh nội dung hay layout thay vì sửa tay bản xuất, rồi xuất lại để mọi thứ không bị lệch nhau.

Mỗi lần xuất còn nhận được điểm chất lượng AI tự động, so sánh bản preview trực tiếp với thiết kế gốc, giúp bạn có ngay tín hiệu nhanh về việc đã sẵn sàng triển khai hay chưa trước khi review thủ công.

Câu hỏi thường gặp

Đầu ra CSS có dùng CSS custom properties (biến) không? Đầu ra tập trung vào các rule chuẩn, chỉnh sửa trực tiếp cho từng phần tử thay vì một lớp theme dựa trên biến — nếu dự án của bạn dùng hệ thống custom properties, hãy tính trước bước gộp thủ công các giá trị sinh ra vào hệ thống đó.

Layout có responsive mặc định không? Có — breakpoint được sinh ra từ các ràng buộc resizing của Auto Layout trên frame, không phải thêm vào sau. Xem Figma Responsive Design: Layout Mobile và Desktop hoạt động thế nào để biết cách này hoạt động với các layout mobile/desktop riêng biệt.

Khác gì so với đầu ra Tailwind? Cùng nguồn dữ liệu, khác đích đến: đầu ra Tailwind quy giá trị về utility class khớp gần nhất (có fallback arbitrary-value cho những gì lệch thang); đầu ra CSS thuần giữ nguyên giá trị chính xác của thiết kế dưới dạng declaration chuẩn. Chọn dựa trên việc dự án của bạn đã chuẩn hóa theo một utility framework hay chưa.

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

Nếu bạn đang phân vân giữa bản xuất CSS thuần và một bản dựa trên framework, cách nhanh nhất để biết cái nào phù hợp là xem cả hai trên cùng một thiết kế. Dùng thử MarkupGen miễn phí, hoặc đọc trọn vẹn hướng dẫn chuyển đổi Figma sang HTML. Muốn xem tổng quan nhanh trước? Ghé trang công cụ chuyển Figma sang CSS.