Tạo HTML5 Banner từ Figma với MarkupGen: thiết kế, chuyển đổi và chỉnh sửa trong Studio Editor

Một banner trông hoàn chỉnh trong Figma từ rất lâu trước khi nó hoàn chỉnh ở dạng code. Vẫn phải có người dựng lại tiêu đề, ảnh sản phẩm và nút bấm bằng HTML và CSS — rồi làm lại lần nữa khi nội dung đổi, nút dịch đi 8px, hoặc chiến dịch cần thêm ba kích thước. Phần lớn thời gian đó dành cho các chỉnh sửa nhỏ, không phải cho lần dựng đầu tiên.

MarkupGen rút ngắn cả hai nửa công việc. Công cụ chuyển một frame Figma thành HTML và CSS, sau đó cho bạn tiếp tục chỉnh kết quả một cách trực quan trong Studio Editor, không cần quay lại Figma cho mọi thay đổi nhỏ. Bài viết này đi qua toàn bộ quy trình Figma to HTML5 banner và nói rõ công cụ làm được gì, chưa làm được gì.

Thiết kế Figma → plugin MarkupGen → tạo HTML/CSS → Studio Editor → xem lại → xuất code

Chuyển thiết kế Figma thành HTML5 banner

Quy trình bắt đầu từ plugin Figma của MarkupGen. Chọn frame banner rồi gửi đi. Cấu trúc, nội dung chữ và hình ảnh của frame xuất hiện trong workspace MarkupGen dưới dạng một dự án, và bạn tạo code tại đó.

Banner được chuyển đổi giống mọi frame khác, nên các thành phần quen thuộc của banner đều được giữ lại:

• Tiêu đề và nội dung khuyến mãi vẫn là chữ thật, không bị gộp vào một tấm ảnh.
• Ảnh sản phẩm và ảnh nền được xuất kèm theo dự án.
• Nút CTA giữ màu nền, bo góc và nhãn.
• Hình khối, layer, kiểu chữ và khoảng cách được đọc từ file thiết kế chứ không ước lượng từ ảnh chụp.

Kết quả là một điểm khởi đầu thường khá sát thiết kế, không phải cam kết giống từng pixel. Hiệu ứng đặc biệt, font tuỳ chỉnh không có trên Google Fonts và các layer chồng lấn nhiều là những chỗ nên kiểm tra trước. Để hiểu kỹ hơn cách công cụ đọc thiết kế, xem cách MarkupGen chuyển Figma sang HTML/CSS.

Chỉnh sửa banner trực tiếp trong Studio Editor

Đây là phần khiến MarkupGen không chỉ là một công cụ sinh code. Code vừa sinh ra hiếm khi là phiên bản cuối của banner: dòng điều khoản dài thêm, nút CTA cần thoáng hơn, khách muốn logo to hơn. Ở đa số công cụ, điều đó nghĩa là sửa CSS bằng tay hoặc quay lại Figma rồi chuyển đổi lại.

Trong MarkupGen, bạn bật Chỉnh sửa trực quan (Visual Editor) trên thanh công cụ của dự án — chế độ chỉnh sửa của studio dự án — và làm việc ngay trên banner.

Ảnh chụp thật của Visual Editor trong MarkupGen, ở đây đang mở một thiết kế trang sản phẩm. Chọn một phần tử sẽ mở các mục nội dung, liên kết và bố cục của nó.

Chọn một phần tử bất kỳ trong bản xem trước hoặc trong cây HTML, bảng thuộc tính sẽ hiện những gì bạn chỉnh được:

Lợi ích thực tế:

• Chỉnh bố cục và vị trí của các phần tử được hỗ trợ mà không cần mở file CSS.
• Tinh chỉnh kích thước, khoảng cách và căn lề bằng giá trị chính xác.
• Thay đổi trực quan mà không phải quay lại Figma cho từng chỉnh sửa nhỏ.
• Thấy kết quả ngay, hoàn tác hoặc làm lại một bước, rồi lưu khi đã ưng.
• Giảm việc qua lại giữa thiết kế và code. Mỗi thay đổi được ghi lại vào HTML và CSS, nên code bạn xuất chính là banner bạn đang thấy.

Hai giới hạn cần nói rõ. Việc chỉnh sửa thực hiện bằng cách chọn phần tử rồi đổi thuộc tính trong bảng thuộc tính — đây không phải canvas kéo-thả tự do. Và chỉnh sửa chỉ đi một chiều: nó thay đổi code đã tạo, không thay đổi file Figma của bạn.

Studio Editor có trong gói Free, dùng chung hạn mức tạo code hằng tháng, và không giới hạn ở các gói trả phí.

Nhiều lựa chọn tạo code

Với kiểu đầu ra HTML Responsive, bạn chọn bộ công cụ CSS dùng để viết code:

• Vanilla CSS — CSS thuần, không phụ thuộc thư viện, dễ đặt nhất vào một vị trí quảng cáo hoặc khối CMS.
• Tailwind CSS — các lớp tiện ích, phù hợp khi banner nằm trong một trang dùng Tailwind.
• Bootstrap — cho đội có trang đã nạp sẵn Bootstrap.

Cả ba đều dùng được ở gói Free. Bulma, Materialize và Pico CSS cũng được hỗ trợ và cần gói trả phí. Nếu chưa chắc nên chọn gì, bài Vanilla CSS vs Bootstrap vs Tailwind có so sánh chi tiết. Với một banner độc lập, Vanilla CSS thường cho file nhỏ và dễ mang đi nhất.

Gói Free có 5 lượt tạo code mỗi tháng; các gói trả phí tính hạn mức theo ngày.

Xem trước, Đánh giá AI và tinh chỉnh

Sau khi tạo code, so bản xem trước với ảnh thiết kế gốc ngay trong workspace và sửa những gì bạn thấy trong Studio Editor.

Ở các gói trả phí, Đánh giá AI cho thêm một góc nhìn thứ hai. Tính năng so kết quả đã tạo với thiết kế gốc và trả về điểm khớp từ 0 đến 10 theo sáu tiêu chí có trọng số — bố cục và cấu trúc, khoảng cách và căn lề, kiểu chữ, màu sắc, nội dung và hình ảnh, kích thước và hiệu ứng — kèm danh sách điểm khác biệt và một prompt có thể sửa để tạo lại.

Hãy coi điểm số là chỉ dẫn nên xem chỗ nào. Nó đo mức độ khớp về hình ảnh với thiết kế; nó không xác nhận banner giống từng pixel, sẵn sàng chạy thật hay hiển thị nhất quán trên mọi trình duyệt. Bài cách đánh giá HTML do AI tạo nêu những mục nên tự kiểm tra.

Xuất và sử dụng HTML5 banner

Khi banner đã ổn, lưu lại và tải HTML kèm ảnh và font dưới dạng .zip, hoặc sao chép mã. Ở các gói trả phí, cùng thiết kế đó còn xuất được thành component React, Vue, Svelte hoặc Angular.

Nên tách bạch ba thứ thường cùng được gọi là "HTML5 banner":

Tức là thứ bạn xuất ra là markup banner sạch, thuộc về bạn. Nếu banner sẽ chạy trên một mạng quảng cáo, hãy tự thêm mã click-through và đóng gói theo nền tảng đó, rồi kiểm tra bằng công cụ xác thực của chính nền tảng. Nếu banner đặt trên website, landing page hoặc CMS của bạn, HTML và CSS đã xuất thường là đủ. Với banner dùng trong email, xem Email Ready.

Quy trình này giúp ai

• Frontend developer bỏ được bước dựng lại và dành thời gian cho phần cần cân nhắc. Xem MarkupGen cho developer.
• Designer và đội sáng tạo tự sửa khoảng cách và nội dung trên banner thật thay vì viết yêu cầu chỉnh sửa.
• Đội digital marketing biến thiết kế chiến dịch thành markup dùng được mà không phải chờ lịch của đội phát triển. Xem MarkupGen cho đội marketing.
• Agency và đội sản xuất quảng cáo xử lý các vòng phản hồi của khách bằng chỉnh sửa thay vì dựng lại. Xem MarkupGen cho agency.

Tóm tắt quy trình

1. Thiết kế banner trong Figma, mỗi kích thước một frame.
2. Chuyển frame bằng plugin Figma của MarkupGen.
3. Tạo HTML và CSS theo bộ công cụ bạn cần.
4. Tinh chỉnh banner trong Studio Editor.
5. Xem lại bản xem trước so với thiết kế, và dùng Đánh giá AI nếu gói của bạn có.
6. Xuất code và kiểm thử ở nơi banner sẽ chạy.

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

MarkupGen có xuất file ZIP sẵn sàng cho Google Ads hoặc mạng quảng cáo khác không? Không. MarkupGen xuất HTML, CSS, ảnh và font của banner. Việc theo dõi lượt bấm, giới hạn dung lượng và quy tắc đóng gói của từng nền tảng quảng cáo chưa được xử lý, nên bạn cần tự thêm và kiểm tra.

Tôi có thể thêm animation cho banner không? Bạn có thể áp các hiệu ứng xuất hiện có sẵn như fade, slide, zoom và flip, chạy khi phần tử đi vào vùng nhìn, và đặt thời lượng, độ trễ, easing. Không có trình chỉnh timeline hay keyframe.

Studio Editor có dùng được ở gói Free không? Có. Chỉnh sửa trực quan có trong gói Free và dùng chung hạn mức tạo code hằng tháng. Đánh giá AI cần gói trả phí.

Các chỉnh sửa của tôi có đồng bộ ngược về Figma không? Không. Chỉnh sửa chỉ thay đổi HTML và CSS đã tạo. File Figma của bạn không bị sửa.

Banner có khớp chính xác với thiết kế không? Thường khá sát, nhưng không cam kết khớp tuyệt đối. Hãy so bản xem trước với bản gốc và sửa các điểm khác biệt trong Studio Editor.

Biến thiết kế Figma thành HTML5 banner chỉnh sửa được

Thiết kế trong Figma. Tạo code bằng MarkupGen. Tinh chỉnh banner trong Studio Editor.

Chuyển Figma sang HTML với MarkupGen →