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

Bulma nằm ở một vị trí khá đặc biệt so với Bootstrap hay Tailwind: nó là một framework component đầy đủ, nhưng lại chỉ dùng class — không kèm JavaScript, không cần bước build. Điều đó khiến Bulma trở thành một đích đến "sạch" cho việc export từ Figma, nhưng chuyển tay một thiết kế sang đúng bộ từ vựng class của Bulma vẫn đòi hỏi hiểu rõ hệ grid, spacing và modifier của nó để chọn đúng class mỗi lần.

Vì sao chuyển tay từ Figma sang Bulma lại chậm

Hệ grid dựa trên flexbox của Bulma (columns, column, modifier kích thước is-*) đọc rất đơn giản khi đã viết xong, nhưng để đi từ một frame Figma đến đó bằng tay lại tốn công dịch lặp đi lặp lại y như bất kỳ framework nào khác:

• Ánh xạ Auto Layout sang hệ cột của Bulma. Một hàng phần tử cách đều nhau trong Figma phải trở thành đúng tổ hợp columns, column is-half/is-one-third và cách xử lý gap — quyết định bằng mắt, từng frame một.
• Chọn đúng class modifier. Bulma thể hiện phần lớn style qua modifier (is-primary, is-rounded, is-large), nên phải dịch một màu fill hay bo góc trong Figma thành "modifier Bulma gần nhất" — mà sự tương ứng này không phải lúc nào cũng khớp hoàn hảo.
• Dựng lại typography và spacing theo đúng thang đo riêng của Bulma (title, subtitle, helper mb-*/mt-*) thay vì copy thẳng giá trị pixel.
• Lặp lại toàn bộ ở mỗi breakpoint, vì các helper responsive của Bulma (is-hidden-mobile, thay đổi độ rộng cột) phải thêm tay cho từng kích thước màn hình trong thiết kế.

Không có bước nào trong số này khó về mặt khái niệm, nhưng đây chính xác là kiểu công việc lặp lại, đòi hỏi phán đoán nhiều, dễ tạo ra những điểm không nhất quán nhỏ trên một thiết kế thật nhiều trang.

MarkupGen tạo output Bulma từ thiết kế thật như thế nào

MarkupGen loại bỏ hẳn bước dịch thay vì chỉ làm nó nhanh hơn. Quy trình giống nhau bất kể output là gì:

1. Export frame từ Figma bằng plugin MarkupGen — plugin nắm bắt cấu trúc, style và hình ảnh cùng lúc.
2. AI dựng markup từ đúng cấu trúc thật của thiết kế, không phải một bản xấp xỉ.
3. Tinh chỉnh nội dung, font và layout trực quan trong editor tích hợp trước khi chốt bất cứ điều gì.
4. Export gói code cuối cùng ở định dạng Bulma 1.0.2.

Tại thời điểm export, Auto Layout và các giá trị spacing của Figma được ánh xạ sang đúng class grid và helper thật của Bulma thay vì đoán mò — một hàng phần tử dùng Auto Layout trở thành cấu trúc columns/column với kích thước tương ứng, còn padding, gap và alignment được giải quyết bằng helper spacing của Bulma thay vì inline style. Output vẫn hoàn toàn không phụ thuộc JavaScript, đúng theo triết lý của Bulma, nên không cần nối thêm gì để CSS render đúng.

Bulma nằm ở đâu trong các định dạng output của MarkupGen

Bulma là 1 trong 6 định dạng CSS mà MarkupGen hỗ trợ, cùng với Vanilla CSS, Tailwind, Bootstrap, Materialize và Pico — chọn theo từng dự án trong bảng cấu hình thay vì cố định từ đầu. Đây là lựa chọn đáng cân nhắc khi bạn muốn một thẩm mỹ hiện đại, sạch sẽ theo mặc định mà không cần dùng cả một thư viện component như Bootstrap hay Materialize đòi hỏi. Xem so sánh cả 6 định dạng tại 6 CSS Framework cho Figma-to-Code.

Kiểm tra markup được tạo trước khi xuất bản

Chuyển đổi tự động cho ra đúng cấu trúc class ở phần lớn thiết kế, nhưng vẫn đáng để rà lại trước khi merge:

• Kiểm tra độ rộng cột ở mỗi breakpoint — grid của Bulma khá linh hoạt, nên xác nhận các kích thước is-* được tạo vẫn đúng ý trên mobile, không chỉ trên desktop.
• Rà soát các mẫu modifier lặp lại, nhất là nơi cùng một component (card, kiểu button) xuất hiện nhiều lần — nó nên trả về đúng cùng một bộ class modifier ở mọi nơi.
• Xác nhận HTML semantic bên dưới các class Bulma — output mặc định ưu tiên thẻ có ý nghĩa thay vì <div> lồng nhau.
• Dùng editor tích hợp để chỉnh nội dung hoặc layout thay vì sửa tay class đã export, rồi export lại.

Mỗi lần export cũng có điểm chất lượng AI tự động, cho bạn tín hiệu nhanh xem đã sẵn sàng xuất bản hay chưa.

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

Nếu bạn vẫn đang tự chọn tay các class modifier của Bulma để khớp với một file Figma, hãy thử xem bao nhiêu phần công việc đó biến mất khi class được sinh ra từ giá trị thật của thiết kế. Dùng thử MarkupGen miễn phí trên một frame của bạn, hoặc xem trang công cụ chuyển Figma sang Bulma để biết bạn nhận được gì ngay từ đầu.