Bạn đã bao giờ rơi vào cảnh phải thiết kế một trang danh sách sản phẩm gồm 50 món hàng chưa? Quy trình thường thấy là: Tạo một cái card mẫu -> Duplicate (nhân bản) ra 50 cái -> Rồi ngồi hì hục click vào từng cái để sửa tên sản phẩm, sửa giá tiền, thay hình ảnh cho đỡ trùng lặp.

Việc này không chỉ tốn thời gian mà còn cực kỳ nhàm chán. Chưa kể, nếu dùng toàn chữ “Lorem Ipsum” thì thiết kế trông rất giả, không đánh giá được độ dài ngắn của nội dung thực tế.

Hãy dừng việc copy-paste thủ công đó lại! Với plugin Google Sheets Sync, bạn có thể biến một file Excel khô khan thành giao diện trực quan trong tích tắc.

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

Plugin Google Sheets Sync là plugin giúp kết nối dữ liệu từ một bảng tính Google Sheets trực tuyến và “đổ” (populate) nó vào các layer trong Figma.

Bạn chỉ cần chuẩn bị nội dung trong Google Sheets, đặt tên layer trong Figma khớp với tên cột, và plugin sẽ tự động điền thông tin vào đúng vị trí.

Tính năng chính:

  • Đồng bộ hàng loạt: Điền thông tin cho hàng trăm item chỉ với 1 cú click.
  • Hỗ trợ đa dạng: Đồng bộ được cả Văn bản (Text), Hình ảnh (thông qua link ảnh), và thậm chí là đổi màu sắc (Hex code).
  • Cập nhật dễ dàng: Khi nội dung thay đổi (ví dụ sếp bảo tăng giá sản phẩm), bạn chỉ cần sửa bên Google Sheets rồi nhấn Sync lại, thiết kế sẽ tự cập nhật. Không cần sửa tay từng cái.
  • Dữ liệu thật: Giúp thiết kế của bạn trông thực tế hơn (Real content), phát hiện sớm các lỗi vỡ layout do tên quá dài hoặc ảnh không khớp tỉ lệ.

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

  • UI Designer (E-commerce): Thiết kế trang danh sách sản phẩm, catalog, menu đồ ăn.
  • UX Designer: Cần kiểm thử giao diện với dữ liệu thật (Real data) thay vì Lorem Ipsum vô nghĩa.
  • Agency: Làm các profile nhân sự, danh sách thành viên team với tên và avatar khác nhau.

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

  • Tìm “Google Sheets Sync” 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

Nguyên lý cốt lõi là: Tên Layer trong Figma phải trùng với Tên Cột trong Google Sheets (có thêm dấu #).

Bước 1: Chuẩn bị Google Sheet

  • Tạo một file Google Sheet mới.
  • Hàng đầu tiên là tiêu đề cột. Ví dụ: Title, Price, Image
  • Điền dữ liệu vào các hàng bên dưới. (Với cột Image, hãy dán đường link trực tiếp của ảnh vào).
  • Quan trọng: Cài đặt quyền chia sẻ file Sheet là “Anyone with the link” (Bất kỳ ai có liên kết) để plugin có thể đọc được.

Bước 2: Chuẩn bị file Figma

  • Tạo một Component hoặc Group cho 1 item mẫu.
  • Đổi tên các layer text mà bạn muốn thay thế bằng cách thêm dấu # đằng trước tên cột tương ứng.
    • Ví dụ: Layer tên sản phẩm đặt tên là #Title 
    • Layer giá tiền đặt tên là #Price 
    • Layer hình ảnh (Rectangle hoặc Frame) đặt tên là #Image 

Bước 3: Nhân bản và Chạy Plugin

  • Nhân bản item mẫu đó ra số lượng bạn muốn (ví dụ 10 cái). Chọn tất cả chúng.
  • Mở plugin Google Sheets Sync.
  • Dán link file Google Sheet bạn đã tạo vào và nhấn Fetch & Sync.

Bước 4: Tận hưởng.

  • Bùm! Toàn bộ 10 item đó sẽ tự động thay đổi nội dung và hình ảnh theo đúng thứ tự trong file Excel của bạn.

Mẹo nhỏ:

  • Dùng dấu “.”: Nếu bạn không muốn đặt tên layer (vì lười), bạn có thể đặt tên cột trong Sheet trùng khớp hoàn toàn với nội dung text hiện tại trong Figma. Nhưng cách dùng # vẫn là chuẩn và an toàn nhất.
  • Random: Nếu bạn chỉ có 5 dòng dữ liệu nhưng lại có 20 item thiết kế? Đừng lo, plugin sẽ tự động lặp lại hoặc lấy ngẫu nhiên để điền cho đầy.

3. Kết luận

Plugin Google Sheets Sync là công cụ giúp đưa quy trình thiết kế của bạn lên một tầm cao mới: Thiết kế dựa trên dữ liệu (Data-driven Design).

Nó giải phóng bạn khỏi công việc nhập liệu tay chân nhàm chán để tập trung vào việc xử lý bố cục và trải nghiệm. Một khi đã quen dùng plugin này, bạn sẽ không bao giờ muốn quay lại thời kỳ copy-paste từng dòng nữa đâu!