Auto Layout trong Figma: làm nút, card, danh sách co giãn

Auto layout trong Figma là gì, cách thêm bằng Shift + A, 3 kiểu dọc, ngang, lưới, padding và gap, Hug, Fill, Fixed, cách lồng auto layout làm nút, card, danh sách và các lưu ý.

Auto layout trong Figma là thuộc tính gắn cho một frame để các đối tượng bên trong tự xếp theo hướng, khoảng cách, padding và căn lề đã đặt; khi nội dung đổi, thêm hay bớt, khung tự co giãn mà bạn không phải kéo tay từng lớp. Cách thêm nhanh nhất: chọn các lớp và bấm Shift + A, hoặc bấm Add auto layout ở thanh bên phải. Bài này giải thích 3 kiểu auto layout (dọc, ngang, lưới), padding và gap, ba kiểu co giãn Hug, Fill, Fixed, cách lồng auto layout để làm nút, card, danh sách, kèm các lưu ý về constraints, component và prototype, theo trang trợ giúp "Guide to auto layout" của Figma đọc ngày 21/10/2026.

Auto layout trong Figma là gì?

Nút và danh sách tự co giãn theo nội dung. Mô phỏng do ColorME dựng bằng HTML/CSS.

Theo Figma, auto layout dùng trên frame để thiết kế "phản ứng" với thay đổi của nội dung, giúp tiết kiệm thời gian và làm giao diện co giãn được. Các đối tượng trong một frame có auto layout được tự sắp xếp dựa trên hướng (direction), khoảng cách (spacing), padding, căn lề (alignment) và các thuộc tính khác. Khi nội dung đổi, hoặc khi đối tượng được thêm, bớt, đổi kích thước, bố cục tự điều chỉnh mà không cần đặt lại vị trí bằng tay.

Figma đưa ra vài ví dụ dùng auto layout: nút co giãn khi bạn sửa chữ trên nút, danh sách thích nghi khi thêm, bớt hoặc ẩn mục, bento box và dashboard, trang web vừa với nhiều kích thước màn hình. Trang trợ giúp cũng ghi auto layout có ở mọi gói (Available on all plans) và ai có quyền chỉnh sửa file đều dùng được.

Hình minh hoạ trong bài do mình dựng bằng HTML/CSS (flexbox và grid, cùng ý tưởng với auto layout) để bạn thấy cách khung phản ứng; đây không phải ảnh chụp Figma. Xem thêm định nghĩa auto layout trong thư viện thuật ngữ của ColorME.

Cách thêm auto layout

1. Chọn một hoặc nhiều lớp (hoặc một frame) trên canvas.
2. Bấm Shift + A, hoặc bấm Add auto layout ở thanh bên phải.
3. Figma sẽ đoán bạn muốn kiểu dọc, ngang hay lưới; bạn đổi kiểu khác bất cứ lúc nào.
4. Chỉnh padding, gap, căn lề và kiểu co giãn ở thanh bên phải.

Mẹo nhỏ khi bắt đầu: xếp các lớp gần đúng thứ tự mong muốn trước khi bấm Shift + A cho dễ kiểm soát. Nếu kiểu Figma chọn không đúng ý, đổi hướng ở thanh bên phải hoặc kéo lại thứ tự lớp trong khung.

3 kiểu auto layout: dọc, ngang, lưới

3 kiểu auto layout: dọc, ngang có wrap và lưới.

• Vertical (dọc): xếp đối tượng theo trục y. Đối tượng thêm, bớt hay đổi thứ tự đều theo trục y. Ví dụ: danh sách việc cần làm, bài đăng trong bảng tin.
• Horizontal (ngang): xếp theo trục x. Ví dụ: một hàng nút, các icon trên thanh điều hướng của app.
• Grid (lưới): xếp đối tượng theo cột và hàng, hợp với thư viện ảnh, bento box và dashboard. Khác với Wrap, đối tượng trong grid không tự xuống dòng mà nằm trong ô lưới, và có thể chiếm nhiều hàng hoặc nhiều cột.

Wrap: tự xuống dòng khi hết chỗ

Kiểu dọc và ngang có thêm tuỳ chọn Wrap: khi đối tượng không còn vừa trong khung, chúng chuyển sang hàng mới (kiểu ngang) hoặc cột mới (kiểu dọc). Wrap rất hợp cho hàng tag, nhãn lọc, danh sách chip. Figma lưu ý wrap theo chiều dọc không phải bố cục masonry: đối tượng vẫn theo thứ tự auto layout và chỉ sang cột tiếp khi cột hiện tại đã đầy. Xem thêm auto layout wrap và auto layout grid.

Padding và gap

Padding và gap trong một khung auto layout.

Kiểu auto layout nào cũng có hai thông số khoảng cách chính:

• Padding: khoảng trống giữa mép frame cha và các đối tượng bên trong. Có thể đặt đều bốn phía, theo chiều dọc và ngang, hoặc riêng từng cạnh trên, phải, dưới, trái.
• Gap: khoảng cách giữa các đối tượng. Nhập một số để đặt chính xác; với kiểu dọc và ngang, bạn còn có thể đặt gap là Auto và chọn Between, Around hoặc Evenly để giãn đều.

Thói quen tốt: dùng một bộ khoảng cách cố định cho cả thiết kế (ví dụ 4, 8, 12, 16, 24, 32) thay vì số lẻ tuỳ hứng. Khi padding và gap theo cùng một thang, giao diện nhìn đều và dễ chuyển sang code hơn.

Hug, Fill, Fixed: khung co giãn thế nào?

Hug, Fill và Fixed khi khung cha rộng ra.

Đây là phần mạnh nhất của auto layout: đối tượng tự đổi kích thước theo thiết lập và các đối tượng xung quanh. Bạn đặt kiểu co giãn cho từng trục ở ô Width và Height trên thanh bên phải; rê chuột lên từng lựa chọn, Figma hiện đường kẻ trên canvas để bạn xem trước khung sẽ đổi ra sao.

Hug contents

Khung luôn giữ kích thước nhỏ nhất ôm quanh nội dung, vẫn tính padding. Ví dụ của Figma: chữ rộng 40 px trong một khung có padding trái, phải 10 px thì khung rộng 60 px; chữ đổi thành 50 px thì khung thành 70 px. Nháy đúp vào cạnh dọc hoặc ngang của khung để đặt nhanh Hug cho chiều đó. Lưu ý: nếu một đối tượng con đặt Fill container, khung cha sẽ không còn hug theo chiều đó nữa mà chuyển sang Fixed.

Fill container

Đối tượng giãn ra chiếm hết chỗ trống trong khung cha, vẫn tôn trọng khoảng cách. Fill chỉ áp cho đối tượng con, không áp cho frame cấp cao nhất. Giữ Alt (macOS: Option) và nháy đúp vào cạnh để đặt nhanh Fill.

Fixed và min, max

Fixed giữ nguyên kích thước bất kể đối tượng cha, con hay bên cạnh thay đổi. Kéo tay đổi kích thước hoặc gõ một số vào ô Width, Height cũng chuyển chiều đó sang Fixed. Min và max dùng kèm các kiểu trên, ví dụ một nút Hug nhưng không hẹp hơn 120 px; thêm ở menu Width hoặc Height bằng Add min width, Add max width.

Lồng auto layout: làm nút, card, danh sách

Lồng auto layout để làm một card hoàn chỉnh. Card mẫu do ColorME dựng.

Theo Figma, sức mạnh thật của auto layout nằm ở việc lồng các khung auto layout vào nhau. Mỗi khung lồng có padding và gap riêng, bạn kết hợp kiểu dọc, ngang, lưới để dựng giao diện phức tạp. Ví dụ card khoá học trong hình:

1. Nút: chữ + icon, auto layout ngang, padding 10 đến 16 px, khung Hug. Đổi chữ "Xem chi tiết" thành chữ dài hơn, nút tự rộng.
2. Hàng nút: bọc hai nút trong một auto layout ngang, gap 10 px.
3. Card: bọc ảnh, tiêu đề, mô tả và hàng nút trong auto layout dọc, gap 14 px, padding 18 px. Ảnh đặt Fill theo chiều ngang để luôn rộng bằng card.
4. Danh sách card: bọc nhiều card trong auto layout ngang có Wrap, hoặc Grid nếu cần ô to ô nhỏ.

Làm xong, thử sửa chữ dài hơn, thêm một dòng mô tả hay xoá một nút: nếu card tự điều chỉnh đúng như mong muốn là bạn đã đặt Hug, Fill hợp lý. Muốn phác bố cục nhanh trước khi dựng trong Figma, có thể dùng công cụ vẽ wireframe của ColorME.

Phím tắt và lưu ý khi dùng auto layout

Phím tắt và lưu ý khi dùng auto layout.

• Ignore auto layout (trước đây gọi là absolute position): đưa một đối tượng ra khỏi luồng auto layout nhưng vẫn nằm trong khung, đặt tự do như absolute position trong CSS. Bấm Ignore auto layout ở thanh bên phải, hoặc kéo đối tượng vào khung trong khi giữ Control trên Mac. Xem absolute position trong Figma.
• Constraints: không áp được cho đối tượng con trong khung auto layout, trừ khi đối tượng đó bỏ qua auto layout. Thay vào đó, dùng kiểu co giãn (Hug, Fill, Fixed) để quyết định cách đối tượng phản ứng. Bản thân khung auto layout vẫn dùng constraints được nếu nó nằm trong một frame thường.
• Component và instance: component là frame nên thêm auto layout được, nhưng phải thêm cho từng component, chưa có cách thêm hàng loạt. Ở instance, bạn chỉnh được padding và gap, nhưng không đổi thứ tự hay thêm lớp mới; xoá lớp ở instance chỉ là ẩn lớp. Figma gợi ý đặt sẵn một icon giữ chỗ với độ mờ 0% trong component chính để sau này đổi icon ở instance.
• Prototype: hiệu ứng smart animate không tính nền của frame, nên muốn dùng Slide in hoặc Move in, hãy thêm nền (đặt một hình chữ nhật trong frame thường rồi để khung auto layout bên trong). Muốn cuộn nội dung tràn khung, đặt khung auto layout bên trong một frame thường, vì khung auto layout tự giãn theo nội dung.

Bài tập 15 phút để quen auto layout

1. Nút: gõ một dòng chữ, thêm một hình vuông làm icon, chọn cả hai và bấm Shift + A. Đặt padding 12 và 20, gap 8, rồi đổi chữ dài, ngắn để xem nút tự co giãn.
2. Danh sách: nhân bản nút thành 5 dòng, chọn tất cả và bấm Shift + A để có auto layout dọc. Kéo đổi thứ tự một dòng, xoá một dòng, xem khoảng cách vẫn đều.
3. Thanh điều hướng: 4 icon trong auto layout ngang, gap đặt Auto (Between), khung cha Fixed 375 px. Thêm một icon, các icon tự giãn lại.
4. Card: làm lại card như hình 5, đặt ảnh Fill theo chiều ngang, rồi đổi chiều rộng card từ 320 lên 400 px để thấy ảnh và chữ chạy theo.

Làm xong bốn bài này, bạn đã dùng đủ ba kiểu co giãn và cách lồng khung, đủ để dựng hầu hết thành phần giao diện thường gặp.

Lỗi hay gặp khi mới dùng auto layout

• Khung không chịu co lại: có đối tượng con đang Fill, hoặc khung đã bị đặt Fixed do bạn kéo tay; nháy đúp cạnh để về Hug.
• Không kéo tự do được một lớp trong khung: bật Ignore auto layout cho lớp đó.
• Không đặt được constraints cho con: dùng Hug, Fill, Fixed thay vì constraints.
• Instance không thêm được icon: thêm icon giữ chỗ trong component chính rồi đổi ở instance.

Auto layout là một trong những kỹ năng nền khi học thiết kế giao diện. Muốn học Figma bài bản, từ auto layout, component tới prototype và dự án app, xem khoá UI/UX của ColorME; đọc thêm bài bí quyết dùng Figma cho thiết kế UI/UX.

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

Auto layout trong Figma là gì?

Là thuộc tính gắn cho frame để các đối tượng bên trong tự xếp theo hướng, khoảng cách, padding và căn lề; khi nội dung đổi, thêm hoặc bớt, khung tự điều chỉnh mà không cần kéo tay.

Phím tắt thêm auto layout trong Figma là gì?

Chọn các lớp rồi bấm Shift + A, hoặc bấm Add auto layout ở thanh bên phải.

Hug contents và Fill container khác nhau thế nào?

Hug contents áp cho khung auto layout, khung co giãn ôm theo nội dung. Fill container áp cho đối tượng con, giãn ra chiếm hết chỗ trống trong khung cha.

Auto layout có mấy kiểu?

Ba kiểu: Vertical (dọc), Horizontal (ngang) và Grid (lưới). Kiểu dọc và ngang có thêm tuỳ chọn Wrap để tự xuống hàng hoặc sang cột khi hết chỗ.

Làm sao để một lớp nằm tự do trong khung auto layout?

Chọn lớp đó và bật Ignore auto layout (trước đây gọi là absolute position) ở thanh bên phải; lớp được đặt tự do và có thể dùng constraints.