Mở đầu — vì sao bài này quan trọng
Nếu bạn từng thiết kế một nút bấm trong Figma, rồi khách hàng yêu cầu đổi chữ từ "Đăng ký" thành "Đăng ký ngay hôm nay", và bạn phải ngồi kéo lại chiều rộng nút, canh lại chữ vào giữa, chỉnh lại padding hai bên — thì bạn đã tự tay làm một việc mà đáng lẽ Figma nên làm hộ bạn. Nhân việc đó lên 40 màn hình, 12 loại nút, 3 trạng thái mỗi nút, và bạn sẽ hiểu vì sao nhiều designer nghỉ việc vì đau vai chứ không phải vì thiếu ý tưởng.
Auto Layout chính là câu trả lời. Đây không phải một tính năng phụ mà là cột sống của Figma hiện đại. Gần như mọi thứ đáng giá trong Figma ngày nay — Components, Variants, Design System, responsive design — đều dựa trên Auto Layout. Một designer không thạo Auto Layout giống như một thợ mộc không biết dùng máy khoan: vẫn làm được việc, nhưng chậm gấp mười lần và sản phẩm kém chắc chắn hơn.
Trong bài này, tôi sẽ giúp bạn hiểu Auto Layout không phải như một danh sách nút bấm, mà như một cách tư duy về bố cục. Khi bạn nắm được tư duy này, bạn sẽ thiết kế nhanh hơn, file gọn hơn, và quan trọng nhất: bản thiết kế của bạn sẽ "nói cùng ngôn ngữ" với lập trình viên khi bàn giao (handoff).
Khái niệm cốt lõi
Auto Layout là Flexbox của Figma
Nếu bạn có chút kiến thức lập trình web, hãy nhớ ngay một câu: Auto Layout chính là Flexbox của CSS, được đưa vào giao diện thiết kế. Cùng một triết lý: bạn không đặt từng phần tử vào một tọa độ cố định, mà bạn xếp chúng vào một "hộp" thông minh, rồi khai báo quy tắc sắp xếp — hướng nào, cách nhau bao nhiêu, canh lề ra sao. Khi nội dung thay đổi, cái hộp tự co giãn theo.
Nếu bạn chưa biết Flexbox, cũng không sao. Hãy tưởng tượng một khay đựng thức ăn có vách ngăn tự động: bạn bỏ 3 món vào thì khay chia đều 3 ngăn, bỏ thêm món thứ 4 thì khay tự nới ra và chia lại. Đó là tinh thần của Auto Layout: frame tự resize theo content, các item tự align và tự spacing.
Bốn nhóm thuộc tính bạn phải nắm
Khi bật Auto Layout cho một frame (phím tắt Shift + A), bảng thuộc tính bên phải sẽ xuất hiện. Có bốn nhóm quan trọng nhất:
1. Direction (Hướng). Có ba lựa chọn: Horizontal (ngang — các item xếp cạnh nhau), Vertical (dọc — các item xếp chồng lên nhau), và Wrap (tự xuống dòng khi hết chỗ, giống flex-wrap trong CSS). Direction quyết định trục chính (main axis) mà mọi thứ khác sẽ xoay quanh.
2. Spacing / Gap (Khoảng cách giữa các item). Đây là khoảng cách giữa từng phần tử con. Có một chế độ đặc biệt tên "Space Between" (Auto): thay vì cố định khoảng cách, Figma sẽ đẩy các item ra sát hai đầu và dàn đều khoảng trống ở giữa — cực kỳ hữu ích cho thanh navigation hay header.
3. Padding (Đệm trong). Là khoảng cách từ mép trong của frame đến các item. Bạn có thể set padding đều bốn phía, hoặc tách riêng trên/dưới/trái/phải. Đây chính là thứ tạo ra "không gian thở" quanh nội dung nút bấm hay thẻ (card).
4. Alignment (Canh lề). Được điều khiển bằng một ô vuông 3x3 (giống bàn cờ ca-rô). Nó quyết định các item nằm ở đâu bên trong frame: trái, giữa, phải, trên, dưới. Ô này thay đổi ý nghĩa tùy theo Direction bạn chọn.
Resizing — trái tim của tính "tự động"
Đây là phần khiến nhiều người mới bối rối nhất, nhưng cũng là phần quan trọng nhất. Mỗi phần tử trong Auto Layout có hai thuộc tính kích thước: chiều ngang (Horizontal resizing) và chiều dọc (Vertical resizing), mỗi chiều có ba lựa chọn:
- Fixed (Cố định): Kích thước không đổi dù nội dung thay đổi. Ví dụ: một icon 24px luôn là 24px.
- Hug contents (Ôm sát nội dung): Frame co lại vừa khít với nội dung bên trong. Đây là lựa chọn cho nút bấm — nút "ôm" lấy chữ, chữ dài thì nút dài ra.
- Fill container (Lấp đầy khung chứa): Phần tử giãn ra để chiếm hết không gian còn trống của frame cha. Đây là tương đương của
flex-grow: 1trong CSS. Dùng cho ô input muốn kéo dài hết chiều ngang, hay các cột chia đều nhau.
Tình huống thực tế
Ví dụ 1: Nút "Đặt hàng" của một sàn TMĐT tại TP.HCM
Một bạn designer ở startup thương mại điện tử tại Quận 1 kể với tôi rằng team bạn ấy có 3 ngôn ngữ trên app: tiếng Việt, tiếng Anh, và tiếng Hàn (vì có nhiều khách Hàn Quốc). Chữ "Đặt hàng" tiếng Việt là 8 ký tự, nhưng "Place your order" tiếng Anh dài gấp đôi, còn tiếng Hàn "주문하기" lại ngắn hơn.
Ban đầu team vẽ nút bằng khung cố định (fixed frame). Kết quả: bản tiếng Anh bị chữ tràn ra ngoài nút, bản tiếng Hàn thì chữ lọt thỏm với khoảng trắng hai bên xấu xí. Mỗi lần đổi ngôn ngữ là mỗi lần vẽ lại 30 nút.
Sau khi chuyển sang Auto Layout với thiết lập: Direction ngang, padding 12px trên-dưới và 24px trái-phải, chiều ngang để Hug contents, canh giữa. Kết quả: nút tự động dài ra khi gặp chữ tiếng Anh, tự co lại khi gặp chữ tiếng Hàn, và padding luôn giữ nguyên đẹp đẽ ở mọi ngôn ngữ. Bài học: với sản phẩm đa ngôn ngữ, Hug contents + padding cố định là công thức bất bại cho nút bấm.
Ví dụ 2: Header của một ứng dụng ngân hàng số
Hãy hình dung team thiết kế của một ngân hàng số như Timo hay Cake. Header của app có: logo bên trái, và hai icon (thông báo, cài đặt) bên phải. Yêu cầu: dù màn hình là iPhone SE nhỏ hay iPhone Pro Max lớn, logo luôn dính sát mép trái, hai icon luôn dính sát mép phải.
Nếu đặt tọa độ cố định, designer phải tạo hai phiên bản header cho hai kích thước màn hình. Với Auto Layout, chỉ cần một frame duy nhất: Direction ngang, Spacing để chế độ Space Between (Auto), chiều ngang của frame để Fill container. Bây giờ Figma tự đẩy logo về trái, đẩy nhóm icon về phải, và khoảng trống ở giữa tự dàn ra theo chiều rộng màn hình.
Bài học: "Space Between" là vũ khí bí mật cho mọi thanh ngang cần "dính hai đầu" — header, footer, thanh tab, dòng giá tiền có nhãn bên trái và số bên phải.
Ví dụ 3: Danh sách sản phẩm co giãn của một app giao đồ ăn
Một team làm app giao đồ ăn kiểu ShopeeFood cần thiết kế thẻ món ăn (food card): ảnh món bên trái, còn bên phải là tên món, mô tả, và giá xếp dọc. Vấn đề: tên món có món ngắn ("Phở bò"), có món dài ("Cơm tấm sườn bì chả trứng đặc biệt size lớn").
Giải pháp là Auto Layout lồng nhau (nested): frame ngoài cùng nằm ngang chứa [ảnh] và [khối thông tin]. Ảnh để Fixed 100px. Khối thông tin để Fill container để nó chiếm hết phần còn lại. Bên trong khối thông tin lại là một Auto Layout dọc chứa tên, mô tả, giá. Khi tên món dài, chữ tự xuống dòng, khối thông tin tự cao lên, và toàn bộ thẻ tự giãn theo — ảnh vẫn giữ nguyên. Team này báo cáo rằng thời gian dựng 50 thẻ món giảm từ 2 ngày xuống còn nửa buổi.
Bài học: Auto Layout lồng nhau là cách bạn dựng những bố cục phức tạp mà vẫn giữ được tính tự động. Fixed cho phần cứng (ảnh, icon), Fill cho phần co giãn (nội dung chữ).
Hướng dẫn từng bước
Hãy cùng dựng một nút bấm chuẩn Auto Layout từ đầu:
- Tạo text. Gõ phím
T, viết chữ "Đăng ký". Đừng vội vẽ hình chữ nhật nền trước — hãy để text dẫn dắt.
- Bật Auto Layout. Chọn text vừa tạo, nhấn
Shift + A. Figma sẽ bọc text trong một frame Auto Layout, mặc định frame này "hug" sát chữ.
- Thêm màu nền. Ở bảng Fill bên phải, thêm một màu nền (ví dụ xanh dương). Giờ bạn đã có hình dạng nút.
- Set padding. Trong phần Auto Layout, đặt padding dọc 12px, padding ngang 24px. Nút có không gian thở.
- Kiểm tra resizing. Đảm bảo cả chiều ngang và chiều dọc đều để Hug contents. Đây là điểm mấu chốt để nút tự co giãn theo chữ.
- Kiểm chứng. Sửa chữ thành "Đăng ký ngay". Nếu nút tự dài ra mà padding không đổi — bạn đã làm đúng. Nếu chữ tràn ra ngoài — bạn đang để chiều ngang ở chế độ Fixed, hãy đổi lại.
- Bo góc và nâng cấp. Thêm border radius, thêm một icon vào trước chữ (icon và text giờ tự cách nhau đúng bằng Spacing bạn đặt). Chúc mừng, bạn vừa dựng một nút bấm sản xuất được.
Lỗi thường gặp & mẹo
Lỗi 1: Nhầm giữa Hug và Fill. Đây là lỗi số một của người mới. Nút bấm cần Hug (ôm chữ), còn ô input trong form cần Fill (kéo dài hết dòng). Nếu nút của bạn bị dài loằng ngoằng chiếm hết màn hình, gần như chắc chắn bạn đang để Fill thay vì Hug.
Lỗi 2: Lạm dụng khoảng trắng thủ công. Nhiều bạn quen thói nhấn phím cách hoặc kéo tay để tạo khoảng cách giữa các item. Trong Auto Layout, tuyệt đối để Spacing làm việc đó. Khoảng cách thủ công sẽ vỡ ngay khi nội dung thay đổi.
Lỗi 3: Quên đặt tên frame. Auto Layout lồng nhau tạo ra nhiều frame chồng lớp. Nếu tên toàn là "Frame 47", "Frame 48", bạn và cả lập trình viên sẽ phát điên khi handoff. Hãy đặt tên có ý nghĩa: "Card / Info", "Button / Primary".
Mẹo 1: Học phím tắt. Shift + A để bật Auto Layout, Shift + Alt + A để gỡ bỏ. Riêng hai phím này đã tiết kiệm cho bạn hàng giờ.
Mẹo 2: Kéo thả để đổi thứ tự. Trong một Auto Layout, bạn có thể kéo một item và Figma sẽ tự chèn nó vào vị trí mới, các item khác tự dịch chuyển. Không cần canh lại gì cả.
Mẹo 3: Nghĩ như lập trình viên. Vì Auto Layout ánh xạ gần như 1:1 với Flexbox, khi bạn dựng đúng Auto Layout, lập trình viên nhìn vào Dev Mode sẽ đọc ra ngay display: flex, gap, padding, justify-content. Thiết kế của bạn tự động trở nên "code được".
Bài tập thực hành
- Nút đa trạng thái: Dựng một nút "Thêm vào giỏ" bằng Auto Layout (icon + chữ). Sau đó đổi chữ thành "Đã thêm vào giỏ hàng thành công" và xác nhận nút tự giãn mà padding không đổi.
- Header dính hai đầu: Tạo một frame ngang rộng 375px, đặt logo bên trái và hai icon bên phải, dùng Space Between. Kéo frame rộng ra 768px và kiểm tra logo/icon vẫn dính đúng hai mép.
- Card lồng nhau: Dựng một food card như Ví dụ 3 với ảnh Fixed bên trái và khối thông tin Fill bên phải (tên + mô tả + giá xếp dọc). Thử đổi tên món thành một câu thật dài và quan sát thẻ tự cao lên.
- Thử thách nâng cao: Dựng một danh sách 3 thẻ như trên, bọc chúng trong một Auto Layout dọc với Spacing 16px. Thêm một thẻ thứ 4 và xác nhận danh sách tự dãn cách đều — không cần canh tay bất cứ đâu.
Tóm tắt
Auto Layout là Flexbox của Figma: bạn khai báo quy tắc sắp xếp thay vì đặt tọa độ cố định, và bố cục tự co giãn theo nội dung. Bốn nhóm thuộc tính cần nắm là Direction (ngang/dọc/wrap), Spacing (khoảng cách giữa item, đặc biệt là chế độ Space Between), Padding (đệm trong), và Alignment (canh lề). Trái tim của tính tự động nằm ở ba chế độ resizing: Fixed (cố định), Hug contents (ôm nội dung — dùng cho nút), và Fill container (lấp đầy — dùng cho input, cột co giãn).
Ba tình huống thực tế — nút đa ngôn ngữ, header dính hai đầu, và food card lồng nhau — cho thấy cùng một nguyên lý áp dụng từ chi tiết nhỏ nhất đến bố cục phức tạp. Hãy nhớ: Fixed cho phần cứng, Fill cho phần co giãn, Hug cho phần ôm sát nội dung. Khi bạn dựng đúng Auto Layout, bạn không chỉ thiết kế nhanh hơn — bạn còn tạo ra bản thiết kế "code được", sẵn sàng cho bước handoff. Đây chính là nền tảng để bước tiếp vào Components và Variants ở những bài sau.