Cách Figma Auto Layout giúp bạn thoát cảnh kéo thả từng pixel

Bạn vừa thiết kế xong một chiếc nút "Lưu" cực kỳ ưng ý. Sếp đi ngang qua, vỗ vai: "Em đổi text thành 'Lưu thông tin đăng ký' cho rõ ràng nhé!". Thế là bạn lại lụi cụi kéo dãn khung nền, căn giữa lại đoạn text, rồi dịch chuyển các phần tử bên cạnh để không bị đè lên nhau. Nghe quen không?

Nếu bạn đang làm UI bằng cách "kéo thả thủ công" như vẽ tranh trên giấy, bạn đang tự đốt thời gian của chính mình. Trở thành một designer "nhàn hạ" tại DIA DEMY bắt đầu từ việc làm chủ Figma Auto Layout.

Tại sao làm thủ công lại là "thảm họa"?

Khi thiết kế giao diện tĩnh, mọi thứ trông rất hoàn hảo. Nhưng thực tế, dữ liệu luôn thay đổi. Tên người dùng dài ngắn khác nhau, danh sách sản phẩm có thể thêm bớt, màn hình điện thoại thì đủ loại kích cỡ.

Thói quen này còn phá hỏng tính nhất quán của sản phẩm. Bạn rất dễ lỡ tay để khoảng cách nút này là 16px, nhưng nút kia lại thành 17px. Điều này làm cho việc xây dựng một hệ thống như Bento Grid trở thành một cơn ác mộng thật sự.

Auto Layout: Biến thiết kế tĩnh thành "thực thể sống"

Nói một cách dễ hiểu, Figma Auto Layout là cách bạn ra lệnh cho các phần tử: "Này, hãy tự động ôm lấy nội dung bên trong, và giữ khoảng cách với nhau đúng 16px nhé, dù tao có gõ thêm chữ gì đi nữa!".

Nó hoạt động y hệt như Flexbox trong lập trình web. Nếu bạn đưa thiết kế này cho developer, họ sẽ code CSS gần như thế này:

.button {
  display: flex;
  flex-direction: row; /* Hướng ngang */
  padding: 12px 24px; /* Khoảng cách trong */
  gap: 8px; /* Khoảng cách giữa icon và chữ */
}

Nhờ cơ chế này, bạn chỉ cần ném một icon và một dòng text vào, bấm Shift + A, set thông số một lần duy nhất. Chiếc nút sẽ tự động co giãn to nhỏ tùy theo độ dài của chữ. Thậm chí nếu bạn copy thêm một icon nữa vào trong, mọi thứ tự động đẩy ra xa một cách mượt mà.

Tuyệt chiêu "Wrap" và "Min/Max"

Phiên bản Figma gần đây đã biến Auto Layout thành "con quái vật" thực sự nhờ tính năng Wrap (tự động rớt dòng) và Min/Max width/height.

• Wrap: Khi các thẻ sản phẩm xếp hàng ngang bị tràn khỏi màn hình, chúng sẽ tự động rớt xuống dòng dưới. Không cần phải nhóm thủ công từng hàng nữa!
• Min/Max Width: Giúp bạn quy định "Cái khung chat này được co giãn thoải mái, nhưng tối đa chỉ bự tới 600px thôi để đọc cho dễ".

Đừng ngại dành một buổi chiều đọc qua tài liệu chính thức từ Figma, bạn sẽ thấy nó tiết kiệm cho bạn hàng trăm giờ làm việc mỗi tháng.

Mặt trái của "Sự tự động"

Auto Layout rất thần kỳ, nhưng nó cũng có một "tác dụng phụ". Khi bạn lồng ghép quá nhiều lớp Auto Layout vào nhau (khung chứa nút -> lồng vào khung chứa header -> lồng vào khung chứa page), cây layer của bạn sẽ sâu thăm thẳm và rối rắm chẳng khác nào một mê cung.

Làm sao để giữ cho cấu trúc Auto Layout vừa đủ linh hoạt, lại vừa phẳng và dễ bảo trì? Giới hạn nào cho việc lồng ghép các Frame? Hẹn gặp lại bạn ở bài viết tuần sau nhé!