Mở đầu — vì sao bài này quan trọng
Hãy tưởng tượng bạn vừa thiết kế một cái card sản phẩm cho website bán mỹ phẩm. Card đó có tên sản phẩm, giá, và một nút "Mua ngay". Mọi thứ trông hoàn hảo — cho đến khi khách hàng yêu cầu đổi tên sản phẩm từ "Son" thành "Son lì lâu trôi cao cấp Hàn Quốc". Đột nhiên chữ tràn ra ngoài khung, nút "Mua ngay" bị đè lên, và bạn phải ngồi kéo tay từng phần tử để chỉnh lại. Nếu có 20 card như vậy, bạn sẽ mất cả buổi chiều chỉ để làm một việc lẽ ra máy nên tự làm.
Đây chính xác là vấn đề mà Auto Layout giải quyết. Nếu bạn đã học qua Flexbox trong CSS ở các bài trước, thì tin tốt là: Auto Layout trong Figma về bản chất chính là Flexbox được đưa vào công cụ thiết kế. Frame sẽ tự co giãn theo nội dung, các phần tử tự sắp xếp theo hàng hoặc cột, khoảng cách được giữ đều đặn một cách tự động.
Bài này là một trong những bài quan trọng nhất của cả phần Figma. Lý do rất đơn giản: không nắm Auto Layout, bạn vẫn có thể vẽ được một giao diện đẹp, nhưng bạn sẽ không bao giờ xây được component thực sự dùng được — thứ có thể tái sử dụng, co giãn, và bàn giao cho developer mà không gây hiểu lầm. Auto Layout là nền tảng để bạn bước vào thế giới thiết kế có hệ thống, chuyên nghiệp, đúng cách mà các team product ở Việt Nam như Tiki, MoMo, hay VNG đang làm việc hằng ngày.
Khái niệm cốt lõi
Auto Layout là gì
Auto Layout là một thuộc tính bạn gán cho một Frame trong Figma. Khi một Frame có Auto Layout, nó không còn là một cái hộp tĩnh nữa, mà trở thành một container thông minh: nó tự sắp xếp các phần tử con bên trong theo một chiều (ngang hoặc dọc), tự giữ khoảng cách giữa chúng, và tự co giãn kích thước khi nội dung thay đổi.
Nếu bạn đối chiếu với CSS, mối liên hệ gần như một-một:
- Direction (Horizontal / Vertical) ⇔
flex-direction: row / column - Gap giữa các phần tử ⇔
gap - Padding ⇔
padding - Alignment (căn chỉnh trong container) ⇔
justify-contentvàalign-items
Ba thuộc tính bạn phải nắm
Khi bật Auto Layout cho một Frame, panel bên phải Figma sẽ hiện ra ba nhóm điều khiển quan trọng nhất:
1. Direction (Hướng): Bạn chọn các phần tử con xếp theo chiều ngang (horizontal) hay chiều dọc (vertical). Một thanh navigation thường là horizontal; một danh sách bài viết hay form đăng ký thường là vertical.
2. Spacing (Gap) và Padding: Gap là khoảng cách giữa các phần tử con. Padding là khoảng đệm bên trong mép Frame. Hai cái này nghe giống nhau nhưng hoàn toàn khác — gap là khoảng trống giữa các "con", còn padding là khoảng trống từ mép Frame "cha" vào tới nội dung.
3. Resizing (Cách co giãn): Đâ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 mạnh nhất. Mỗi Frame và mỗi phần tử có ba chế độ kích thước theo từng chiều:
- Fixed (cố định): Kích thước không đổi, dù nội dung thế nào.
- Hug contents (ôm sát nội dung): Frame tự co lại vừa khít với nội dung bên trong. Đây là lý do nút bấm tự dài ra khi chữ dài hơn.
- Fill container (lấp đầy container): Phần tử giãn ra chiếm hết không gian còn lại của Frame cha. Đây là tương đương của
flex: 1trong CSS.
Vì sao Auto Layout sinh ra để dựng Component
Một component tốt phải sống được trong nhiều hoàn cảnh: nút có chữ ngắn, chữ dài, có icon, không icon; card có ảnh cao, ảnh thấp, mô tả 1 dòng hay 3 dòng. Nếu bạn dựng bằng cách kéo tay thủ công, mỗi biến thể là một lần ngồi chỉnh. Với Auto Layout, bạn dựng một lần đúng cấu trúc, và component tự thích nghi. Đó là lý do trong toàn bộ quy trình thiết kế hệ thống, gần như mọi component nghiêm túc đều bắt đầu bằng một Frame có Auto Layout.
Tình huống thực tế
Tình huống 1 — Nút bấm "biết tự dài ra" ở một startup fintech
Một bạn designer mới vào làm tại một startup ví điện tử ở TP.HCM được giao dựng bộ nút bấm (button) cho app. Ban đầu bạn ấy vẽ nút bằng một rectangle, đặt chữ "Thanh toán" lên trên, căn giữa bằng mắt. Trông ổn. Nhưng khi PM yêu cầu thêm nút "Xác nhận chuyển khoản liên ngân hàng", chữ dài hơn hẳn, và bạn ấy phải kéo rộng rectangle, rồi căn lại chữ vào giữa — một việc thủ công, dễ lệch.
Sau khi học Auto Layout, bạn ấy làm lại: chọn text "Thanh toán", bấm Shift + A để bọc nó trong một Auto Layout frame, đặt padding ngang 24, padding dọc 12, và để chiều rộng ở chế độ Hug contents. Giờ đây mỗi khi đổi chữ, nút tự co giãn để luôn có đúng 24px đệm hai bên — không bao giờ lệch, không bao giờ phải căn lại.
Bài học: Padding + Hug contents = nút bấm tự thích nghi với độ dài chữ. Đây là cách dựng button đúng chuẩn, và nó tiết kiệm hàng giờ chỉnh sửa khi nội dung thay đổi.
Tình huống 2 — Card sản phẩm ở một sàn thương mại điện tử
Một team thiết kế cho sàn TMĐT nội địa cần dựng card sản phẩm để dùng lại trên cả trang chủ, trang danh mục, và trang tìm kiếm. Card gồm: ảnh sản phẩm, tên (có thể 1 hoặc 2 dòng), giá, và nút "Thêm vào giỏ".
Cách cũ: mỗi card là một cụm phần tử rời, và khi tên sản phẩm dài 2 dòng thay vì 1, toàn bộ phần bên dưới bị xô lệch, giá và nút đè lên nhau. Designer phải vào sửa tay từng card lệch.
Cách dùng Auto Layout: họ dựng card là một Vertical Auto Layout frame, gap 8px giữa các phần tử. Ảnh để Fill container theo chiều ngang, tên sản phẩm để Hug theo chiều dọc (tự cao lên khi xuống 2 dòng). Kết quả: khi tên dài thêm một dòng, cả card tự cao lên, giá và nút tự đẩy xuống đúng vị trí, gap luôn giữ đều 8px. Một cấu trúc, dùng được cho hàng nghìn sản phẩm với độ dài tên khác nhau.
Bài học: Vertical Auto Layout với gap cố định giúp danh sách phần tử có chiều cao biến đổi vẫn luôn giữ khoảng cách đều và bố cục ổn định. Đây là nền móng của mọi card, list item, comment item bạn sẽ gặp.
Tình huống 3 — Thanh navigation co giãn theo màn hình
Một bạn freelancer ở Đà Nẵng nhận làm landing page cho một quán cà phê. Header gồm logo bên trái và một nhóm menu ("Trang chủ", "Menu", "Về chúng tôi", "Liên hệ") cùng nút "Đặt bàn" bên phải. Yêu cầu: logo luôn dính trái, nhóm menu + nút luôn dính phải, và khoảng giữa giãn ra theo bề rộng màn hình.
Bạn ấy dùng Horizontal Auto Layout cho cả header, và đây là mẹo hay: thay vì căn các phần tử thủ công, bạn ấy đặt một spacer hoặc dùng tính năng Space between (tương đương justify-content: space-between) để Figma tự đẩy logo về trái, nhóm menu về phải. Khi resize Frame rộng ra, khoảng giữa tự giãn, hai cụm hai bên giữ nguyên.
Bài học: Auto Layout không chỉ để xếp phần tử sát nhau — với chế độ căn chỉnh "Space between", nó còn mô phỏng được các bố cục giãn nở phức tạp mà không cần một phần tử thừa nào.
Hướng dẫn từng bước
Hãy cùng dựng một card sản phẩm hoàn chỉnh để bạn thực hành toàn bộ vòng đời của Auto Layout.
Bước 1 — Chuẩn bị nội dung thô. Tạo các phần tử cơ bản trước: một ảnh placeholder (rectangle), một text "Tên sản phẩm", một text "299.000đ", và một nút (text "Thêm vào giỏ"). Đừng lo về vị trí chính xác lúc này.
Bước 2 — Bọc bằng Auto Layout. Chọn cả 4 phần tử (giữ Shift để chọn nhiều), rồi bấm Shift + A. Figma sẽ bọc chúng trong một Auto Layout frame. Nếu hướng ban đầu chưa đúng, vào panel bên phải đổi Direction sang Vertical (chiều dọc).
Bước 3 — Đặt Gap và Padding. Trong panel Auto Layout, đặt Gap giữa các phần tử là 12. Đặt Padding đều 16 cho cả bốn cạnh. Bạn sẽ thấy card ngay lập tức gọn gàng, đều đặn — không còn căn bằng mắt nữa.
Bước 4 — Cấu hình Resizing cho từng phần tử.
- Chọn ảnh, đặt chiều rộng là Fill container để ảnh luôn rộng bằng card.
- Chọn text tên sản phẩm, để chiều cao Hug (tự cao khi xuống dòng).
- Chọn cả Frame card, đặt chiều rộng Fixed (ví dụ 240) nhưng chiều cao Hug contents để card tự cao theo nội dung.
Bước 6 — Test bằng cách đổi nội dung. Sửa tên sản phẩm thành một chuỗi dài 2-3 dòng. Quan sát: card tự cao lên, gap giữ đều, nút không bị đè. Nếu mọi thứ chạy mượt, bạn đã dựng đúng.
Bước 7 — Chuyển thành Component. Khi cấu trúc đã ổn, chọn Frame card và bấm Ctrl/Cmd + Alt + K để biến nó thành Component. Giờ bạn có một component co giãn, sẵn sàng tái sử dụng. (Phần tạo Component và Variants sẽ được đào sâu ở bài kế tiếp.)
Lỗi thường gặp & mẹo
Lỗi 1 — Nhầm giữa Hug và Fill. Người mới hay đặt nhầm: muốn nút ôm sát chữ thì lại để Fill (nút giãn hết Frame), hoặc muốn ảnh rộng bằng card thì lại để Hug (ảnh co lại bằng kích thước gốc). Mẹo ghi nhớ: Hug = ôm con vào lòng (co lại theo nội dung), Fill = lấp đầy cha (giãn ra hết chỗ).
Lỗi 2 — Quên dùng nested Auto Layout. Nhiều bạn cố nhồi tất cả vào một Auto Layout phẳng, dẫn đến bố cục cứng nhắc. Thực tế, hầu hết component thật là nhiều Auto Layout lồng nhau: card chứa phần thông tin (vertical) chứa hàng giá-và-nút (horizontal). Hãy nghĩ theo cấu trúc cây giống HTML.
Lỗi 3 — Padding âm hoặc đặt kích thước cố định lung tung. Khi bạn đặt Frame là Fixed nhưng nội dung lớn hơn, phần tử sẽ tràn ra ngoài. Ưu tiên Hug khi có thể, chỉ dùng Fixed khi bạn thực sự cần một kích thước cố định (ví dụ avatar 40x40).
Mẹo 1 — Phím tắt vàng: Shift + A để bọc Auto Layout, Shift + A trên một Frame đã có Auto Layout để bỏ. Học thuộc phím này, bạn sẽ làm nhanh gấp đôi.
Mẹo 2 — Đặt tên Frame có ý nghĩa. Thay vì "Frame 247", hãy đặt "Card / Product" hay "Button / Primary". Khi bàn giao cho developer, tên rõ ràng giúp họ ánh xạ sang component code dễ dàng.
Mẹo 3 — Dùng "Absolute position" cho ngoại lệ. Đôi khi bạn cần một badge "Sale" nằm đè lên góc ảnh, không tuân theo dòng chảy Auto Layout. Figma cho phép đặt một phần tử con sang chế độ Absolute position để nó thoát khỏi layout — giống position: absolute trong CSS.
Bài tập thực hành
- Dựng một nút bấm tự co giãn: Tạo một text bất kỳ, bọc Auto Layout, đặt padding ngang 24 / dọc 12, để chiều rộng Hug. Đổi chữ từ ngắn sang dài và xác nhận nút tự dài ra mà chữ vẫn căn giữa với đúng đệm hai bên.
- Dựng một card sản phẩm hoàn chỉnh theo 7 bước ở trên. Yêu cầu: khi bạn sửa tên sản phẩm thành 3 dòng, toàn bộ card phải tự cao lên mà không có phần tử nào bị đè hay lệch.
- Dựng một thanh navigation gồm logo trái + 4 menu và 1 nút bên phải, dùng Horizontal Auto Layout với chế độ "Space between". Resize Frame rộng/hẹp và kiểm tra hai cụm hai bên có dính đúng mép không.
- Thử thách nested: Dựng một comment item gồm avatar (40x40, Fixed) bên trái, và một cột (vertical Auto Layout) bên phải chứa tên người + nội dung bình luận. Đây là bài tập rèn tư duy lồng Auto Layout — kỹ năng bạn sẽ dùng mỗi ngày.
Tóm tắt
Auto Layout chính là Flexbox của Figma: bạn gán nó cho một Frame, và Frame đó tự sắp xếp phần tử con theo hàng hoặc cột, tự giữ gap và padding, tự co giãn theo nội dung. Ba thuộc tính cốt lõi cần nắm là Direction (ngang/dọc), Spacing (gap và padding), và Resizing với bộ ba Fixed / Hug / Fill — trong đó Hug là "ôm sát nội dung" còn Fill là "lấp đầy container".
Phím tắt Shift + A để bật Auto Layout là thứ bạn sẽ dùng hàng trăm lần mỗi ngày. Sức mạnh thật sự đến từ nested Auto Layout — lồng nhiều Auto Layout vào nhau theo tư duy cây giống HTML — để dựng những component co giãn mượt mà như nút bấm, card, navigation, comment item. Khi nắm vững phần này, bạn không chỉ vẽ đẹp mà còn xây được những component thực sự dùng được, bàn giao sạch sẽ cho developer, và sẵn sàng bước sang bài tiếp theo về Components & Variants — nơi bạn biến những Frame này thành một thư viện component có thể tái sử dụng trên toàn bộ dự án.