Auto Layout trong Figma: Ánh xạ sang CSS Flexbox (và khi nào vẫn cần Grid)

Nếu từng mở một file Figma và thấy "Auto Layout" được bật cho một frame, bạn đã tiếp xúc với thứ rất gần với Flexbox — đội ngũ thiết kế Figma cố tình mượn đúng mô hình tư duy này. Hiểu được cách ánh xạ này không chỉ là kiến thức thú vị: nó giúp bạn chuyển từ file thiết kế sang CSS thực chạy được mà không phải đoán mò từng giá trị spacing bằng mắt.

Auto Layout thực sự kiểm soát điều gì

Auto Layout là cách Figma biến một frame thành một layout container thực sự thay vì chỉ là nhóm các hình được định vị tuyệt đối. Bật nó lên cho một frame, bạn sẽ có một loạt thuộc tính để cấu hình:

• Direction (hướng) — các phần tử con xếp theo chiều dọc hay chiều ngang.
• Spacing / gap (khoảng cách) — khoảng cách cố định giữa các phần tử con.
• Padding — khoảng cách giữa mép frame và các phần tử con, có thể cài riêng cho từng cạnh.
• Alignment (căn chỉnh) — cách các phần tử con xếp hàng dọc theo trục chính và trục phụ.
• Resizing behavior (cách thay đổi kích thước) — frame và các con của nó co theo nội dung, lấp đầy không gian sẵn có, hay giữ kích thước cố định.

Không có thuộc tính nào ở đây là ngẫu nhiên. Mỗi thuộc tính tồn tại vì nó tương ứng với thứ mà một layout engine thực sự cần biết — đó chính xác là lý do vì sao nó ánh xạ gọn gàng sang CSS.

Ánh xạ trực tiếp sang Flexbox

Thuộc tính Auto Layout	CSS Flexbox tương ứng
Direction (dọc/ngang)	flex-direction: column / row
Khoảng cách giữa các item	gap
Padding	padding
Căn chỉnh theo trục chính	justify-content
Căn chỉnh theo trục phụ	align-items
Hug contents (co theo nội dung)	width: fit-content / height: fit-content
Fill container (lấp đầy container)	flex: 1 hoặc width: 100% / height: 100%
Fixed size (kích thước cố định)	width / height tường minh

Nhìn vào bảng này là hiểu ngay tại sao Auto Layout lại trực quan với bất kỳ ai đã quen Flexbox — và tại sao Flexbox lại trực quan với các designer bắt đầu từ Figma. Chúng mô tả cùng một box model, chỉ khác tên gọi.

Những chỗ dễ sai khi chuyển đổi thủ công

Ngay cả với ánh xạ rõ ràng, developer khi tự tay tái tạo Auto Layout vẫn thường vấp phải vài lỗi quen thuộc:

• Alignment hỗn hợp bị làm phẳng. Figma cho phép từng phần tử con override alignment của cả nhóm; rất dễ nhìn qua loa rồi áp một giá trị align-items chung cho tất cả, làm mất các override riêng lẻ vốn cần align-self.
• Mập mờ giữa "hug" và "fill". Một frame co theo nội dung trông giống hệt một frame có chiều rộng cố định khi chỉ nhìn ở một kích thước màn hình, nhưng hành xử hoàn toàn khác khi nội dung hoặc kích thước màn hình thay đổi. Đoán sai chỗ này là nguyên nhân phổ biến khiến layout vỡ khi gặp nội dung thật.
• Bỏ qua gap. Một số developer vẫn dùng mẹo margin thay vì gap, thói quen còn sót lại từ thời Flexbox chưa hỗ trợ tốt — điều này không còn cần thiết nữa vì gap đã được trình duyệt hỗ trợ rộng rãi, và việc bỏ qua nó lại tái tạo đúng những lỗi spacing mà gap sinh ra để giải quyết.
• Frame Auto Layout lồng nhau biến thành flex container lồng nhau một cách tùy tiện. Mỗi frame lồng nhau là một flex context riêng, và việc dịch một-đối-một theo kiểu máy móc có thể tạo ra nhiều phần tử wrapper hơn mức layout thực sự cần.
• Đặt padding sai phần tử. Rất dễ áp padding của frame vào một phần tử con thay vì vào container, làm sai lệch khoảng cách dựa trên gap giữa các phần tử anh em.

Khi Flexbox không phải lựa chọn đúng — hãy dùng Grid

Auto Layout là mô hình một trục: nó rất mạnh với các hàng và cột, kể cả khi lồng ghép nhiều cấp. Nhưng một số thiết kế thực sự mang tính hai chiều, và ép chúng vào Flexbox lồng nhau tạo ra code khó bảo trì hơn cả bản thiết kế gốc. Hãy chuyển sang CSS Grid khi bạn thấy:

• Một layout mà các item cần căn chỉnh theo cả hàng lẫn cột cùng lúc — ví dụ lưới thẻ (card grid), dashboard, hoặc thư viện ảnh.
• Hành vi rõ ràng kiểu "phần tử này chiếm hai cột" hoặc "chiếm hai hàng", điều mà Grid xử lý tự nhiên bằng grid-column / grid-row còn Flexbox không thể diễn đạt trực tiếp.
• Thiết kế mà số cột cần phản hồi theo chiều rộng khả dụng (repeat(auto-fit, minmax(...))) thay vì theo một danh sách breakpoint cố định.
• Các vùng chồng lấp hoặc xếp lớp trong cùng một lưới, việc này đơn giản với hệ thống đặt vị trí của Grid nhưng khá gượng ép với Flexbox.

Một quy tắc đơn giản: nếu Auto Layout của một frame Figma chỉ lồng nhau theo một hướng tại một thời điểm, Flexbox là bản dịch trung thực. Nếu bạn thấy mình đang dựng cả một lưới các frame Auto Layout chỉ để giả lập căn chỉnh theo hàng-cột, đó thường là dấu hiệu giao diện Figma đang bù đắp cho việc thiếu chế độ layout Grid hai chiều thực sự — và lúc đó, sinh ra CSS Grid thật sự sẽ hợp lý hơn.

MarkupGen xử lý việc này tự động như thế nào

Ánh xạ này về nguyên lý không khó hiểu, nhưng làm đúng cho từng frame, từng giá trị gap, từng container lồng nhau trong một file thiết kế thực tế lại là công việc lặp đi lặp lại tốn thời gian — và đây chính xác là loại việc dịch thuật thủ công mà MarkupGen được xây dựng để loại bỏ. Quy trình gồm bốn bước: xuất frame từ Figma bằng plugin đi kèm, plugin này kéo cấu trúc, style và hình ảnh thẳng vào workspace của bạn; AI của MarkupGen dựng HTML và CSS từ chính cấu trúc đó, tự động ánh xạ direction, gap, padding và alignment của Auto Layout sang một cấu trúc Flexbox tương ứng thay vì để bạn đoán mò thủ công; bạn tinh chỉnh nội dung, font chữ và layout trực quan trong trình soạn thảo tích hợp; rồi xuất gói code cuối cùng. Các breakpoint responsive được sinh tự động từ các ràng buộc resizing của thiết kế, và bạn có thể chọn định dạng đầu ra — HTML/CSS thuần, Tailwind CSS, hoặc React components — tùy theo stack đang dùng. Mỗi lần export cũng nhận được điểm chất lượng AI tự động, giúp bạn nhìn nhanh xem code sinh ra đã sẵn sàng đưa vào sản xuất hay chưa. Đầu ra ưu tiên HTML sạch, có ngữ nghĩa, không có <div> lồng nhau thừa thãi — điều này quan trọng cho khả năng bảo trì cũng như cho SEO.

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

Hiểu được cách ánh xạ Auto Layout sang Flexbox giúp bạn review code sinh ra nhanh hơn và nhận ra chính xác chỗ nào thiết kế thực sự cần Grid. Nếu muốn bỏ qua hoàn toàn bước dịch thủ công, hãy thử MarkupGen miễn phí trên chính file Figma của bạn, hoặc đọc hướng dẫn chuyển đổi Figma sang HTML đầy đủ để nắm toàn bộ quy trình từ đầu đến cuối.