Nếu bạn là fan của Pinterest, chắc chắn bạn đã quen thuộc với cách họ sắp xếp hình ảnh: Các tấm ảnh dọc, ngang, to, nhỏ nằm xen kẽ nhau nhưng lại khít rịt, không hề có khoảng trống thừa xấu xí. Đó gọi là plugin Masonry Layout (Bố cục dạng lưới so le).

Trong Figma, nếu bạn dùng Auto-layout hay Grid thông thường, hệ thống sẽ bắt các hình ảnh phải thẳng hàng theo dòng. Kết quả là nếu có một cái ảnh quá cao, nó sẽ đẩy toàn bộ hàng bên dưới xuống, tạo ra những khoảng trắng “vô duyên” ở các ảnh thấp hơn. Để xếp được kiểu Pinterest thủ công, bạn phải chia làm nhiều cột rồi nhặt từng ảnh thả vào bằng mắt – cực kỳ mất thời gian. Hãy để Masonry Grid Layout Organizer làm việc đó thay bạn trong 1 giây.

1. Plugin này là gì? Làm được gì? Dành cho ai?

Plugin Masonry Grid Layout Organizer là công cụ chuyên dụng để sắp xếp một nhóm các đối tượng (thường là ảnh hoặc card) có chiều cao khác nhau vào một lưới cột cố định sao cho tiết kiệm diện tích nhất.

Cơ chế của nó giống như trò chơi Tetris: Nó sẽ tìm xem cột nào đang ngắn nhất để thả đối tượng tiếp theo vào đó. Nhờ vậy, giao diện của bạn luôn trông đầy đặn và liền mạch.

Tính năng chính:

  • Sắp xếp tự động: Biến một đống lộn xộn thành lưới Masonry chỉ với 1 cú click.
  • Tùy chỉnh linh hoạt: Bạn có thể chọn số lượng cột (Columns) và khoảng cách giữa các hình (Gutter/Padding).
  • Tiết kiệm không gian: Loại bỏ hoàn toàn các khoảng trắng dọc (vertical gaps) do sự chênh lệch chiều cao của ảnh.

Plugin này đặc biệt hữu ích cho:

  • UI Designer: Thiết kế trang Gallery ảnh, trang Feed tin tức, hoặc trang danh sách sản phẩm dạng card (như Pinterest, Unsplash).
  • Portfolio Creator: Sắp xếp các tác phẩm (Case study) của mình một cách nghệ thuật, phá vỡ cấu trúc lưới vuông nhàm chán.
  • Moodboard: Gom nhóm các hình ảnh ý tưởng lại với nhau một cách gọn gàng để trình bày.

Bạn có thể tìm plugin này bằng cách:

  • Tìm “Masonry Grid Layout Organizer” trên Figma Community.
  • Hoặc truy cập trực tiếp qua link này.

2. Hướng dẫn sử dụng

Bước 1: Chuẩn bị nguyên liệu

  • Hãy ném tất cả các ảnh hoặc Card mà bạn muốn sắp xếp vào canvas. Kích thước to nhỏ, cao thấp khác nhau cũng không sao (nhưng nên để cùng chiều rộng width sẽ đẹp hơn).
  • Chọn (bôi đen) tất cả chúng.

Bước 2: Mở plugin Masonry Grid Layout Organizer.

Bước 3: Cài đặt thông số

  • Columns: Số lượng cột bạn muốn chia (ví dụ: 3 hoặc 4 cột).
  • Gutter: Khoảng cách giữa các ảnh (ví dụ: 16px hoặc 20px).

Bước 4: Nhấn Organize.

  • Plugin sẽ tự động di chuyển các layer của bạn vào đúng vị trí.

Mẹo nhỏ:

  • Cố định chiều ngang (Fixed Width): Để lưới Masonry đẹp nhất, hãy đảm bảo tất cả các hình ảnh/Card của bạn có cùng chiều rộng (Width), chỉ khác nhau chiều cao (Height). Nếu chiều rộng lung tung, plugin xếp sẽ không thẳng hàng lối.
  • Thứ tự layer: Plugin thường xếp theo thứ tự layer trong bảng Layers panel. Nếu thấy một bức ảnh quan trọng bị đẩy xuống tít dưới cùng, hãy thử đổi vị trí của nó trong bảng Layer rồi chạy lại plugin.

3. Kết luận

Plugin Masonry Grid Layout Organizer là vị cứu tinh cho những thiết kế hướng tới sự năng động và phá cách. Nó giải quyết triệt để bài toán “khoảng trắng chết” mà các công cụ Grid truyền thống bó tay.

Nếu bạn đang muốn làm một trang Gallery ảnh thật “nghệ” hay một Moodboard gây ấn tượng, đừng hì hục xếp tay nữa, hãy gọi plugin này ra giúp sức nhé!