Thư viện thuật ngữ / Figma

Công cụ bố cục trong Figma là gì?

Còn gọi: layout tools

Công cụ bố cục là nhóm tính năng trong phần mềm thiết kế giúp sắp xếp và giữ trật tự các phần tử giao diện, trong Figma gồm frame, layout grid, auto layout, constraints, lệnh căn chỉnh và section.

Hiểu kỹ hơn

Mỗi công cụ giải quyết một việc. Frame tạo vùng chứa có kích thước. Layout grid, bản mới gọi là layout guide, tạo lưới cột tham chiếu để căn chỉnh. Auto layout tự sắp xếp phần tử theo hàng, cột hoặc lưới với khoảng cách cố định, tương ứng với flexbox và grid trong CSS. Constraints quy định phần tử phản ứng thế nào khi frame đổi kích thước. Lệnh Align, Distribute và Tidy up căn và chia đều nhanh. Section giúp nhóm các frame trên canvas theo luồng hoặc trạng thái duyệt. Kết hợp đúng các công cụ này giúp thiết kế co giãn được và dễ bàn giao. Ví dụ: một màn hình danh sách dùng frame điện thoại có lưới 4 cột, bên trong là auto layout dọc chứa các card, còn nút nổi được đặt Absolute position với constraints Right và Bottom. Lỗi thường gặp là căn mọi thứ bằng tay và bằng mắt, đến khi đổi nội dung hoặc kích thước màn hình thì phải sắp lại từ đầu.