Auto layout trong Figma là gì? Cách dùng không bị rối

Auto layout là thiết lập của frame trong Figma giúp các layer con tự xếp theo hàng, cột hoặc lưới, với padding và gap do bạn đặt. Khi nội dung đổi, frame tự co giãn theo. Phần hay gây rối nhất là ba chế độ kích thước Hug, Fill và Fixed. Hiểu đúng ba chế độ này là dựng được hầu hết giao diện.

Tôi là Hai Le, UI/UX designer, từng dựng design system cho Car From Japan, Oreka và Joyme. Bài Học Figma từ số 0 đã giới thiệu auto layout ở ngày 3. Bài này đi sâu hơn: từng thiết lập làm gì, vì sao bố cục bị vỡ, và mỗi thiết lập thành dòng CSS nào.

Thêm và gỡ auto layout như thế nào?

Chọn một hoặc nhiều layer rồi bấm Shift + A. Figma bọc chúng vào một frame auto layout mới, hoặc bật auto layout cho frame đang chọn. Gỡ auto layout bằng Option + Shift + A trên Mac, Alt + Shift + A trên Windows.

Ở cột phải, bạn chọn một trong ba kiểu sắp xếp (flow):

Vertical và Horizontal có thêm Wrap: khi hết chỗ, layer con chuyển sang hàng mới (với Horizontal) hoặc cột mới (với Vertical).

Hug, Fill, Fixed khác nhau thế nào?

Mỗi layer trong auto layout có một chế độ cho chiều rộng và một chế độ cho chiều cao. Hai chiều chọn riêng.

Cột "Áp dụng cho" giải thích phần lớn các lần bị rối. Hug cần có nội dung để co theo, nên chỉ có ở frame auto layout và layer chữ. Fill chỉ có ở layer con, vì nó cần có frame cha để lấp vào.

Một quy tắc tôi hay dùng: chiều rộng đi từ ngoài vào, chiều cao đi từ trong ra. Màn hình hoặc cột ngoài cùng để Fixed. Các khối bên trong để Fill theo chiều rộng. Chiều cao thì gần như luôn để Hug, để chữ dài hơn thì khối tự cao lên.

Với layer chữ, Fixed nghĩa là khung chữ không đổi kích thước theo nội dung. Figma cảnh báo điều này có thể làm chữ đè lên layer khác trong frame auto layout. Một đoạn văn trong thẻ nên để chiều rộng Fill và chiều cao Hug, để chữ tự xuống dòng.

Padding, gap và gap Auto dùng khi nào?

Padding là khoảng từ mép frame tới nội dung. Gap là khoảng giữa các layer con. Bạn nhập số cho gap, hoặc với Vertical và Horizontal thì đặt gap là Auto rồi chọn một trong ba cách chia khoảng trống: Between, Around, Evenly.

Tôi dùng gap số cho hầu hết trường hợp, chỉ dùng Auto khi muốn hai đầu bám sát mép. Ví dụ header có logo trái, menu phải: frame Horizontal, rộng Fill, gap Auto kiểu Between.

Nên lấy padding và gap từ một thang cố định, ví dụ bội số của 4, và lưu thang đó thành variable. Bài Design token là gì nói về cách đặt tên và tổ chức thang này.

Khi nào dùng Wrap, khi nào dùng Grid?

Cả hai đều xếp layer thành nhiều hàng, nhưng xử lý cột khác nhau.

Với Grid, bạn đặt Number of columns và Number of rows trong grid picker ở cột phải. Số hàng mặc định là auto, tức là tự thêm hàng khi có thêm phần tử. Mỗi cột hoặc hàng có thể để Fixed, Hug hoặc Fill. Fill dùng đơn vị fr giống CSS grid.

Làm sao đặt một thứ đè lên mà không phá bố cục?

Dùng Ignore auto layout. Tính năng này trước đây tên là absolute position, Figma đổi tên nhưng giữ nguyên cách hoạt động. Chọn layer con rồi bấm Ignore auto layout ở cột phải. Trên Mac, bạn cũng có thể giữ Control khi kéo một layer vào frame auto layout.

Layer đó vẫn nằm trong frame, nhưng nó và các layer anh em bỏ qua nhau khi co giãn. Tôi dùng cho chấm thông báo trên avatar, nút đóng ở góc popup, hay nhãn "Mới" đè lên ảnh thẻ.

Đừng dùng Ignore auto layout để chữa một bố cục đang lệch. Nếu bạn cần nó cho hơn một hai layer trong cùng frame, cách chia frame đang sai.

Min width và max width để làm gì?

Trong dropdown Width hoặc Height ở cột phải có Add min width, Add max width, Add min height, Add max height. Chúng giới hạn khoảng co giãn của Hug và Fill.

Hai chỗ tôi luôn đặt:

• Max width cho đoạn văn. Khi frame rộng ra ở màn hình desktop, dòng chữ dài quá thì mắt khó tìm đầu dòng tiếp theo. Max width giữ cột chữ ở độ dài dễ đọc.
• Min width cho nút. Nút "OK" Hug contents sẽ quá nhỏ để bấm. Min width giữ nút đủ rộng mà vẫn dài ra khi chữ dài.

Gỡ giới hạn bằng Remove min and max trong cùng dropdown.

Vì sao auto layout của tôi bị rối?

Đây là những lỗi tôi gặp nhiều nhất khi xem file của người mới:

Cách tôi dựng một khối để ít bị rối nhất: phác cây layer bằng chữ trước, rồi mới bấm Shift + A từ trong ra ngoài. Mỗi frame trả lời được câu "khối này xếp theo hướng nào, cách nhau bao nhiêu".

Ví dụ: cấu trúc popup form hỏi xe

Ở Car From Japan, tôi rút gọn popup hỏi xe xuống tiêu đề "Check availability", một dòng thông tin xe, bốn ô liên hệ (tên, email, điện thoại bắt buộc, địa chỉ tuỳ chọn), nút "Add a coupon" và ô tin nhắn điền sẵn. Bạn có thể đọc lý do của từng thay đổi trong case study form inquiry.

Nếu dựng khối này bằng auto layout, tôi sẽ chia frame như sau:

Popup            Vertical · Fixed rộng · Hug cao · padding 24 · gap 16
├─ Header        Horizontal · Fill rộng · gap Auto (Between)
│  ├─ Tiêu đề    Fill rộng
│  └─ Nút đóng   Fixed 24 × 24
├─ Xe            Horizontal · Fill rộng · gap 12
│  ├─ Ảnh nhỏ    Fixed
│  └─ Tên + giá  Vertical · Fill rộng · Hug cao
├─ Ô liên hệ     Vertical · Fill rộng · gap 12 (mỗi ô Fill rộng)
├─ Add a coupon  Hug
└─ Nút gửi       Fill rộng · Hug cao

Tên xe dài thì chỉ dòng "Xe" cao lên, phần dưới tự dịch xuống. Kéo popup rộng ra thì ô liên hệ và nút gửi giãn theo.

Auto layout thành CSS như thế nào?

Auto layout gần như ánh xạ một đối một sang flexbox. Đây là lý do tôi khuyên designer muốn học code bắt đầu từ đây.

Ví dụ header ở trên viết bằng CSS:

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Khi file Figma dựng bằng auto layout sạch, công cụ AI như Claude Code đọc qua Figma MCP cũng cho ra code gọn hơn hẳn. Bài Figma MCP và Claude Code hướng dẫn cách nối hai công cụ đó. Nếu bạn muốn tự viết phần code, đọc tiếp Claude Code cho designer.

Nên học gì sau auto layout?

Bước tiếp theo là component và variant: biến khối auto layout đã dựng thành khối dùng lại được. Tôi viết riêng về phần này trong bài Component và Variant trong Figma.

Nếu bạn đang tìm một designer dựng được design system và nói chuyện được với dev bằng CSS, phần giới thiệu về tôi có kinh nghiệm và cách liên hệ.

Nguồn

Kiểm ngày 04/10/2026.

• Guide to auto layout, Figma Help Center
• Use the grid auto layout flow, Figma Help Center
• CSS flexible box layout, MDN Web Docs