Có bao giờ bạn thiết kế một màn hình danh sách khách hàng, một bảng Dashboard hay trang thương mại điện tử mà phải ngồi… gõ tay từng dòng chữ không?

Chuyện thường ngày ở huyện:

  1. Copy dòng “Lorem Ipsum dolor sit amet…” dán vào 10 lần.
  2. Sửa tên thành “Nguyễn Văn A”, “Trần Thị B”… cho đỡ trùng.
  3. Lên Google tìm ảnh đại diện (avatar) rồi hì hục chèn vào từng ô tròn.

Kết quả là gì? Một bản thiết kế trông rất “giả trân”, thiếu sức sống và tốn hàng giờ đồng hồ cho những việc thủ công nhàm chán (người ta hay gọi là “chạy bằng cơm”).

Contento sinh ra để giải quyết nỗi đau này. Nó giúp bạn đổ dữ liệu (text, số liệu, hình ảnh) vào hàng loạt layer chỉ bằng vài cú click chuột, biến bản thiết kế trở nên sống động như thật ngay lập tức.

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

Plugin Contento là một công cụ giúp tự động hóa việc điền nội dung (Content Population) vào các bản thiết kế trong Figma. Thay vì dùng văn bản giả vô nghĩa, plugin này cho phép bạn chèn dữ liệu ngẫu nhiên nhưng có ý nghĩa thực tế (tên người, địa chỉ, ngày tháng, số tiền…).

Tính năng chính:

  • Điền dữ liệu hàng loạt: Chọn 50 layer Text và điền 50 cái tên khác nhau chỉ trong 1 giây.
  • Thư viện đa dạng: Cung cấp sẵn các bộ dữ liệu phổ biến như: Full Name, Email, Phone Number, Date, Price, Avatar…
  • Tùy chỉnh linh hoạt: Bạn có thể tự tạo danh sách dữ liệu riêng (Custom List) phù hợp với dự án (ví dụ: danh sách tên các món ăn Việt Nam, danh sách tỉnh thành Việt Nam…).
  • Smart Fill: Thông minh hơn Copy-Paste, nó giữ nguyên Style (font, màu sắc) của layer gốc.

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

  • UI/UX Designers: Thiết kế các màn hình có danh sách dài (List view, Table), Feed mạng xã hội, hoặc trang Profile.
  • Researchers: Cần làm Prototype với dữ liệu thật để đi test với người dùng (người dùng sẽ bối rối nếu thấy ai cũng tên là “Lorem Ipsum”).
  • Product Owners: Muốn nhìn thấy sản phẩm trông sẽ như thế nào khi chạy thực tế với dữ liệu thật.

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

  • Tìm từ khóa “Contento” 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ị Layer (Component)

  • Hãy tạo ra một Component mẫu (ví dụ: 1 thẻ Card gồm Avatar, Tên, Chức vụ).
  • Nhân bản (Duplicate) nó ra thành một danh sách (dùng Auto-layout là tốt nhất).
  • Mẹo: Đặt tên Layer rõ ràng (ví dụ: layer tên đặt là “Name”, layer ảnh đặt là “Avatar”) sẽ giúp bạn dễ quản lý, nhưng không bắt buộc.

Bước 2: Mở plugin Contento

  • Click chuột phải > Plugins > Chọn Contento.

Bước 3: Chọn Layer và Loại dữ liệu

  • Chọn tất cả các layer Text mà bạn muốn điền tên (dùng phím Shift để chọn nhiều layer hoặc dùng tính năng “Select same properties”).
  • Trong cửa sổ plugin, tìm mục “People” hoặc “Names”.
  • Click vào đó. Bùm! Tất cả các layer Text đã biến thành những cái tên riêng biệt (John, Emily, Michael…).

Bước 4: Nâng cao (Custom Data)

  • Nếu bạn làm dự án cho người Việt và không muốn dùng tên Tiếng Anh?
  • Trong plugin, chọn tab Custom hoặc Create New.
  • Paste danh sách tên Tiếng Việt của bạn vào (mỗi tên một dòng).
  • Nhấn Apply. Giờ đây thiết kế của bạn đã đậm chất Việt Nam.

Mẹo nhỏ:

  • Avatar ngẫu nhiên: Contento cũng hỗ trợ điền ảnh. Chọn các hình tròn/vuông giữ chỗ cho avatar, chọn mục Images/Avatars trong plugin, nó sẽ tự động lấy ảnh ngẫu nhiên từ kho (như Unsplash hoặc kho nội bộ) lấp đầy vào đó.
  • Kết hợp: Dùng Contento để điền dữ liệu thô, sau đó tinh chỉnh lại một chút những chỗ cần nhấn mạnh. Cách này nhanh hơn gấp 10 lần làm thủ công từ đầu.

3. Kết luận

Một bản thiết kế tốt không chỉ đẹp về hình thức mà còn phải đúng về nội dung. Contento giúp bạn thoát khỏi cái bẫy “thiết kế chết” với những dòng chữ vô hồn.

Việc nhìn thấy dữ liệu thật trên bản thiết kế cũng giúp bạn phát hiện ra các lỗi layout sớm hơn (ví dụ: tên quá dài thì bị xuống dòng hay bị cắt bớt?), từ đó có phương án xử lý UI tốt hơn. Đừng làm “thợ gõ phím”, hãy để Contento làm việc đó thay bạn!