Chuyển breakpoint Figma sang CSS Media Query: Cách ánh xạ hoạt động

Trả lời nhanh: Figma không có khái niệm breakpoint tích hợp sẵn theo cách CSS có. Designer mô phỏng tính responsive bằng cách dùng frame riêng cho từng kích thước màn hình, hoặc bằng resizing linh hoạt của Auto Layout (fill/hug) không cần media query nào cả. Thiết kế dùng cách tiếp cận nào sẽ quyết định đầu ra CSS có cần rule @media tường minh hay không.

Figma thực ra không có breakpoint

Đáng nói thẳng, vì đây là một giả định phổ biến: Figma không có tính năng "đặt breakpoint ở đây" gốc tương đương với một CSS media query. Điều designer thực sự làm thay vào đó rơi vào hai mẫu hình, và chúng chuyển sang CSS rất khác nhau.

Mẫu hình 1: frame riêng cho từng kích thước màn hình

Cách tiếp cận truyền thống là một frame riêng biệt cho desktop, tablet và mobile — mỗi cái được dựng bằng tay ở đúng chiều rộng của nó. Điều này ánh xạ trực tiếp sang các breakpoint CSS tường minh: layout của mỗi frame trở thành style bên trong một khối @media (min-width: ...) tương ứng, và việc của developer là quyết định giá trị breakpoint thực sự nên đặt ở đâu (khớp với chiều rộng frame, hay các breakpoint chuẩn như 768px/1024px) vì chiều rộng frame trong Figma là các quyết định thiết kế tròn số, không phải một đặc tả CSS.

Đây là cách tiếp cận đúng để dùng khi layout khác nhau về cấu trúc giữa các kích thước — không chỉ là reflow, mà thực sự khác nhau (một sidebar biến thành bottom nav, một lưới 3 cột biến thành một cột duy nhất với nội dung sắp xếp lại).

Mẫu hình 2: resizing linh hoạt của Auto Layout — thường không cần media query

Mẫu hình còn lại dựa vào hành vi resizing của Auto Layout — "fill container" và "hug contents" — đặt trên một frame duy nhất thay vì vẽ lại toàn bộ layout ở mỗi chiều rộng. Một hàng thẻ được đặt để wrap và lấp đầy không gian sẵn có, một sidebar có chiều rộng cố định cạnh một vùng nội dung chính "fill", text tự động reflow bên trong một container linh hoạt — không cái nào trong số này cần breakpoint. Đó chính là hành vi CSS mà flex-wrap, width theo phần trăm và min-width/max-width mang lại mà không cần một rule @media nào.

Điều này đáng được nêu ra vì đây là nhận định giá trị hơn khi review CSS sinh ra: không phải mọi chi tiết responsive đều nên trở thành một media query. Một thiết kế dựa vào resizing linh hoạt của Auto Layout chuyển thành CSS vốn đã linh hoạt trên một khoảng chiều rộng — thêm breakpoint tường minh lên trên đó thường là công việc thừa, lặp lại hành vi mà layout đã có sẵn.

Những chỗ dễ sai khi dịch thủ công

• Thêm breakpoint ở nơi CSS linh hoạt đã đủ xử lý, dẫn đến nhiều rule @media hơn mức thiết kế thực sự cần và một stylesheet khó bảo trì hơn mức layout đòi hỏi.
• Bỏ sót một breakpoint thật khi thiết kế thực sự có một frame mobile khác biệt về cấu trúc, rồi cố ép layout desktop reflow thành thứ nó chưa từng được thiết kế để trở thành.
• Chọn giá trị pixel breakpoint tùy tiện không khớp với chiều rộng frame của thiết kế lẫn thang breakpoint sẵn có của dự án, tạo ra một giá trị đơn lẻ không CSS nào khác trong dự án dùng tới.

MarkupGen xử lý việc này như thế nào

Hành vi responsive được sinh ra từ chính các ràng buộc resizing thật của frame thay vì thêm vào như một bước thủ công riêng — thiết lập fill/hug của Auto Layout tự động chuyển thành CSS linh hoạt, đúng theo phân biệt đã nói ở trên. Với những thiết kế thực sự có một layout mobile khác biệt (hoặc cần sinh ra từ một frame desktop duy nhất), MarkupGen có thể tạo ra một layout mobile hoặc desktop riêng do AI sinh — xem Figma Responsive Design: Layout Mobile và Desktop hoạt động thế nào để biết cách này hoạt động. Về ánh xạ Auto Layout sang Flexbox làm nền cho tất cả những điều này, xem Auto Layout to CSS.

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

Cách nhanh nhất để biết thiết kế của bạn thực sự cần mẫu hình nào là chạy nó qua công cụ và kiểm tra CSS sinh ra có rule @media hay không. Dùng thử MarkupGen miễn phí trên file Figma của chính bạn, hoặc xem trang công cụ chuyển Figma sang HTML để biết những gì bạn nhận được.