Auto layout là gì?
Còn gọi: bố cục tự động trong Figma
Auto layout là tính năng của Figma tự sắp xếp các đối tượng trong frame theo hàng, cột hoặc lưới với khoảng cách và padding cố định, để frame tự co giãn khi nội dung thay đổi.
Hiểu kỹ hơn
Chọn các đối tượng hoặc một frame rồi nhấn Shift+A để thêm auto layout. Các thiết lập chính: hướng xếp (dọc, ngang, xuống dòng Wrap, và dạng Grid), khoảng cách giữa các phần tử (gap), padding bốn phía, căn chỉnh, và cách co giãn của mỗi phần tử: Hug contents ôm theo nội dung, Fill container lấp đầy phần còn lại, Fixed giữ cố định. Auto layout tương ứng với flexbox và grid trong CSS, nên giúp bản thiết kế sát với cách lập trình viên dựng giao diện. Có thể lồng nhiều tầng auto layout: một card gồm ảnh và khối chữ xếp dọc, trong khối chữ lại có hàng ngang gồm giá và nút. Ví dụ: nút có auto layout padding 12 và 24 sẽ tự rộng ra khi đổi nhãn từ Mua sang Thêm vào giỏ hàng. Lỗi thường gặp là bọc auto layout quá nhiều tầng không cần thiết, hoặc dùng khoảng trắng bằng hình chữ nhật trong suốt thay vì đặt gap và padding.














