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

Constraints là gì?

Còn gọi: ràng buộc vị trí trong Figma

Constraints là thiết lập trong Figma quy định một đối tượng bên trong frame sẽ di chuyển hoặc co giãn thế nào khi frame cha thay đổi kích thước, theo chiều ngang và chiều dọc.

Hiểu kỹ hơn

Constraints chỉ áp dụng cho đối tượng nằm trong frame không dùng auto layout, hoặc đối tượng được đặt Absolute position trong auto layout. Chiều ngang có các lựa chọn Left, Right, Left and right, Center, Scale; chiều dọc có Top, Bottom, Top and bottom, Center, Scale. Ví dụ, nút đóng ở góc phải trên của modal đặt Right và Top để luôn bám góc khi modal rộng ra; thanh header đặt Left and right để giãn theo chiều rộng màn hình; nút nổi đặt Right và Bottom. Muốn đổi kích thước frame mà không kéo theo con, giữ Ctrl/Cmd khi kéo. Khi thiết kế một màn hình cho nhiều cỡ điện thoại, constraints giúp kiểm tra nhanh bằng cách kéo frame. Ví dụ: tab bar đặt Left and right và Bottom sẽ luôn nằm dưới đáy khi đổi từ iPhone SE sang iPhone Pro Max. Lỗi thường gặp là để mặc định Left và Top cho mọi thứ, đến khi đổi kích thước thì các phần tử dồn về góc trái.