Cách chuyển thiết kế Figma thành HTML & CSS sạch (Hướng dẫn từng bước)

Giao một file Figma cho developer thường có nghĩa là ai đó phải ngồi dựng lại thủ công từng frame bằng HTML và CSS: đo khoảng cách, đoán breakpoint, rồi hy vọng trang cuối cùng vẫn khớp với thiết kế sau hàng chục quyết định nhỏ. Bài viết này sẽ đi qua một con đường nhanh hơn — từ một thiết kế Figma hoàn chỉnh đến markup sạch, có ngữ nghĩa.

Vì sao bàn giao Figma sang HTML thủ công lại chậm

Phần lớn thời gian dành cho việc bàn giao không phải là công việc sáng tạo, mà là công việc "dịch":

• Đọc các thiết lập Auto Layout rồi tự tay chuyển thành các quy tắc Flexbox.
• Đo lại padding, gap và cỡ chữ vốn đã được định nghĩa sẵn trong file Figma.
• Quyết định breakpoint responsive nên đặt ở đâu, vì frame Figma thường chỉ có một chiều rộng cố định.
• Dọn dẹp markup để nó không phải là mười tầng thẻ <div> lồng nhau mà chẳng có ý nghĩa ngữ nghĩa nào.

Không việc nào trong số này khó, nhưng chúng lặp đi lặp lại, và chính công việc thủ công lặp lại là nơi lỗi và sự thiếu nhất quán len lỏi vào.

Bước 1: Xuất frame từ Figma

Thay vì xuất ảnh tĩnh hoặc sao chép style từng layer một, hãy chọn frame bạn muốn chuyển đổi và dùng plugin Figma của MarkupGen để gửi nó vào workspace của bạn. Plugin sẽ nắm bắt cấu trúc, style và hình ảnh của frame cùng một lúc, nên không có gì phải tạo lại từ đầu.

Bước 2: Để cấu trúc tự ánh xạ thành code

Đây là lúc phần lớn công việc thủ công biến mất. Một vài ví dụ về những gì được chuyển đổi tự động:

• Auto Layout → Flexbox. Các thuộc tính Auto Layout của Figma (direction, gap, padding, alignment) ánh xạ trực tiếp sang cấu trúc CSS Flexbox tương đương, thay vì phải ước lượng bằng mắt.
• Constraints → breakpoint responsive. Các ràng buộc resize của layout được chuyển thành các quy tắc responsive linh hoạt, thay vì một trang có chiều rộng cố định duy nhất.
• Layer → HTML ngữ nghĩa. Kết quả xuất ra ưu tiên các thẻ có ý nghĩa thay vì một mớ <div> lồng sâu, không nhãn: một khối trang trở thành <section>, thanh điều hướng trở thành <nav>, tiêu đề trở thành <h1>–<h3> đúng thứ bậc, đoạn văn trở thành <p>, nút bấm trở thành <button> hoặc <a> tùy hành vi, ảnh trở thành <img> kèm alt. Một container layout chung chung không mang ý nghĩa riêng thì vẫn nên là <div> — không phải layer Figma nào cũng có sẵn một thẻ ngữ nghĩa tương ứng, việc chọn đúng thẻ phụ thuộc vào ý nghĩa thực sự của nội dung chứ không phải một bảng ánh xạ cố định.

Bước 3: Chọn định dạng đầu ra

Không phải dự án nào cũng cần cùng một loại code. Tùy vào stack bạn đang triển khai, bạn có thể xuất ra:

• HTML/CSS thuần — cho các trang tĩnh hoặc dự án không cần bước build.
• Tailwind CSS — các class tiện ích được sinh ra từ chính các token spacing, màu sắc và typography của thiết kế; xem thêm hướng dẫn chuyển Figma sang Tailwind CSS.
• React — các component bạn có thể chèn thẳng vào một ứng dụng đã có sẵn; xem quy trình chuyển Figma sang React để biết chi tiết.

Bước 4: Tinh chỉnh trước khi xuất

Chuyển đổi tự động đã lo phần lớn công việc, nhưng chuyển từ thiết kế sang code hiếm khi hoàn toàn máy móc 100% — nội dung có thể cần chỉnh sửa lại, hoặc một phần nào đó cần điều chỉnh layout thủ công. Trình chỉnh sửa cho phép bạn tinh chỉnh nội dung, font chữ và layout một cách trực quan trước khi tạo gói xuất cuối cùng, và mỗi lần xuất đều được chấm điểm tự động để bạn có thể nhìn thoáng qua là biết kết quả đã sẵn sàng đưa vào sản xuất hay chưa.

Xử lý responsive: không chỉ là copy kích thước desktop

Một frame Figma thường chỉ đại diện cho một chiều rộng cụ thể — desktop 1440px, có thể kèm thêm một frame mobile riêng. Điều đó không có nghĩa là gán cứng chiều rộng đó vào CSS rồi thu nhỏ toàn trang bằng transform: scale(). Bản thân Figma không tự sinh ra CSS responsive — nó chỉ cung cấp tín hiệu, còn diễn giải thành hành vi responsive thực sự vẫn là việc của developer hoặc hệ thống chuyển đổi:

• Sizing hug / fill / fixed của Auto Layout cho biết phần tử nên co theo nội dung hay lấp đầy container — nền tảng để chọn width: auto, width: 100% / flex: 1, hay một max-width cố định.
• Constraints (pin trái/phải, scale theo container...) bổ sung hành vi cho những phần tử nằm ngoài Auto Layout.
• Media query vẫn cần thiết ở bất kỳ độ rộng nào layout thực sự đổi hình dạng — cột xếp chồng thành một hàng dọc, navigation thu gọn lại — vì một frame Figma chỉ chụp lại vài kích thước viewport cố định, không phải toàn bộ dải giá trị giữa chúng.

Mục tiêu cuối cùng là tái hiện đúng ý đồ responsive của thiết kế trên nhiều kích thước màn hình, không phải sao chép chính xác pixel của frame bạn đang mở.

"Sạch" ở đây thực sự nghĩa là gì

"Code sạch" không chỉ là một cụm từ marketing — đó là những đặc tính cụ thể, có thể kiểm chứng:

1. Không có các thẻ <div> bọc thừa xung quanh một phần tử đơn lẻ.
2. Cấu trúc heading đúng thứ bậc (h1 → h2 → h3) thay vì mọi thứ đều được style để trông giống heading.
3. Sử dụng thẻ ngữ nghĩa ở những chỗ hợp lý — điều mà công cụ tìm kiếm và trình đọc màn hình cũng cần để hiểu trang web.

Điểm cuối cùng đó quan trọng hơn vẻ ngoài của nó — markup dễ cho trình duyệt và crawler phân tích cũng chính là markup dễ đọc hơn cho developer tiếp theo. Đây cũng chính là phần lớn nền tảng cấu trúc của khả năng tiếp cận (accessibility); xem Chuyển Figma sang HTML dễ tiếp cận: Hướng dẫn thực tế để biết những gì vẫn cần rà soát thủ công ngoài các thẻ semantic — ARIA, form, độ tương phản, điều hướng bàn phím.

Một ví dụ nhỏ: từ Auto Layout đến markup thật

Hãy lấy một card đơn giản — một icon, một title và một link "Learn more", được bố trí bằng Auto Layout (vertical, gap 16px, padding 24px). Nếu dựng lại bằng tay, rất dễ buột tay dùng một chồng <div> không nhãn. Khi được chuyển đổi từ cấu trúc thật của frame, cùng một card đó cho ra kết quả:

<article class="feature-card">
  <img src="/icons/rocket.svg" alt="" class="feature-card__icon" />
  <h3 class="feature-card__title">Fast setup</h3>
  <a href="/docs/getting-started" class="feature-card__link">Learn more</a>
</article>

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

Có vài chi tiết đáng chú ý: card này là một <article>, không phải một wrapper chung chung, vì nó là một khối nội dung tự thân đầy đủ. Icon nhận alt="" vì nó mang tính trang trí — text heading đã tự nói lên card này nói về điều gì. "Learn more" là một <a href> thật, không phải một <div> gắn click handler, vì nó điều hướng sang một trang khác. Hướng vertical và gap 16px của Auto Layout ánh xạ trực tiếp sang flex-direction: column và gap: 16px — không cần ước lượng bằng mắt. Đây là ánh xạ phổ biến nhất, nhưng còn nhiều thuộc tính khác cần xử lý đúng (padding, alignment, sizing hug/fill, Auto Layout lồng nhau); xem Figma Auto Layout sang CSS: ánh xạ sang Flexbox thế nào để có bảng ánh xạ đầy đủ hơn.

Những lỗi thường gặp khi chuyển Figma sang HTML

Một vài lỗi lặp lại nhiều nhất khi tự tay chuyển thiết kế Figma sang code:

• Biến mọi layer thành <div>. Bỏ qua ý nghĩa nội dung (navigation, heading, nút bấm...) khiến markup khó hiểu hơn cho cả trình đọc màn hình lẫn công cụ tìm kiếm.
• Lạm dụng position: absolute. Tái hiện đúng vị trí pixel trên canvas Figma nhưng phá vỡ layout ngay khi nội dung hoặc kích thước màn hình thay đổi.
• Bỏ qua Auto Layout, tự đo khoảng cách bằng mắt. Dễ sai lệch và khó bảo trì hơn nhiều so với dịch trực tiếp từ các thuộc tính đã có sẵn trong file thiết kế.
• Gán cứng kích thước desktop rồi mới nghĩ đến responsive sau, thay vì thiết kế layout linh hoạt ngay từ đầu.
• Thứ bậc heading lộn xộn — chọn cỡ chữ theo thẩm mỹ thay vì theo đúng cấp h1 → h2 → h3.
• Bọc thừa <div> quanh một phần tử vốn đã đủ ý nghĩa, hoặc nhầm giữa "trông giống nhau về mặt hình ảnh" với "có cùng ý nghĩa ngữ nghĩa".

Vị trí của quy trình này trong một workflow thực tế

Quy trình này không nhằm thay thế đánh giá của developer — nó loại bỏ bước dịch máy móc để sự đánh giá đó có thể tập trung vào những phần thực sự cần đến: chi tiết tương tác, các trường hợp đặc biệt, và tích hợp trang vào một codebase lớn hơn. Xem cách quy trình này so với việc code tay cùng một frame, hoặc cách các agency đưa nó vào quy trình làm việc với khách hàng. Nếu bạn muốn thấy toàn bộ quy trình bốn bước — xuất, dựng, tinh chỉnh, xuất — ngay trong sản phẩm, bạn có thể dùng thử miễn phí trên file Figma của chính mình.

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

Làm thế nào để chuyển Figma sang HTML? Chọn frame cần chuyển, đọc cấu trúc layer và các thiết lập Auto Layout, rồi dịch chúng thành HTML ngữ nghĩa và CSS tương ứng — Auto Layout thành Flexbox, constraints thành hành vi responsive. Có thể làm thủ công, hoặc dùng công cụ tự động hóa như MarkupGen để rút ngắn phần dịch lặp lại.

Có thể chuyển Figma sang HTML và CSS responsive không? Có, nhưng không tự động hoàn toàn. Auto Layout và constraints cung cấp tín hiệu về hành vi resize (co giãn, lấp đầy, cố định), còn việc quyết định breakpoint cụ thể và kiểm tra layout trên nhiều kích thước màn hình vẫn cần diễn giải thêm từ người hoặc hệ thống chuyển đổi.

Figma Auto Layout tương ứng với CSS nào? Về cơ bản là CSS Flexbox: direction ánh xạ sang flex-direction, gap sang gap, padding sang padding, alignment sang justify-content/align-items. Xem Figma Auto Layout sang CSS để có bảng ánh xạ chi tiết hơn, gồm cả khi nào nên dùng CSS Grid thay vì Flexbox.

Có nên dùng semantic HTML khi chuyển Figma sang HTML? Có. Semantic HTML (nav, article, button, thứ bậc heading đúng...) giúp trình đọc màn hình và công cụ tìm kiếm hiểu đúng cấu trúc trang, không chỉ là vấn đề thẩm mỹ code.

Có thể tự động chuyển Figma sang HTML không? Có thể tự động hóa phần lớn — đọc cấu trúc layer, ánh xạ Auto Layout sang Flexbox, sinh breakpoint từ constraints — nhưng phần rà soát cuối (nội dung, trường hợp đặc biệt, tích hợp vào codebase) vẫn cần con người xem lại.

Muốn chuyển thẳng thiết kế của bạn luôn? Chuyển thiết kế Figma sang HTML/CSS với MarkupGen →