Bạn có bao giờ muốn tạo nhanh một phiên bản wireframe (skeleton) của thiết kế đang làm ví dụ để trình bày bố cục, kiểm tra UX, hoặc tạo trạng thái loading skeleton giống như khi app đang tải nội dung?

Thay vì phải tự vẽ lại từng khối, plugin Ghost sẽ làm điều đó cho bạn chỉ trong một cú click. Plugin này sẽ “hóa ma” toàn bộ thiết kế của bạn loại bỏ chi tiết, giữ lại cấu trúc giúp bạn tập trung vào bố cục và trải nghiệm người dùng hơn là màu sắc hay hình ảnh.

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

Plugin Ghost là một plugin thông minh cho phép bạn biến thiết kế hiện tại thành phiên bản skeleton wireframe tức là bản phác thảo xám (hoặc màu tùy chọn) mô phỏng bố cục mà không có nội dung thật.

Nó hoạt động bằng cách phát hiện toàn bộ layer trong phần chọn (selection), đo kích thước, rồi thay thế chúng bằng các hình khối tương ứng. Nhờ đó, bạn có được bản layout giữ nguyên tỉ lệ và bố cục, nhưng đã được “rút gọn” tối đa.

Tính năng chính:

  • Tạo wireframe trong một cú click: Chọn màn hình hoặc nhóm layer → chọn màu → Ghost!
  • Giữ đúng bố cục gốc: Plugin đo chính xác vị trí và kích thước của từng phần tử để layout “ghost” trung thực nhất.
  • Chọn màu tuỳ chỉnh: Có thể chọn màu xám, trắng, hoặc bất kỳ tông nào phù hợp với phong cách skeleton loading.
  • Xử lý frame thông minh: Ghost giữ lại background của các frame (card, button, container) nhưng loại bỏ stroke và hiệu ứng giúp layout vẫn dễ nhìn và rõ ràng.
  • Loại bỏ auto-layout, effect và fill: Đảm bảo không xảy ra lỗi khi thay thế layer bằng shape placeholder.

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

  • UI/UX Designer cần tạo nhanh wireframe để thảo luận cấu trúc trang.
  • Prototype Designer muốn thêm trạng thái loading skeleton thật cho app/web.
  • Freelancer hoặc nhóm thiết kế muốn trình bày ý tưởng bố cục mà chưa cần hoàn thiện hình ảnh.

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

  • Tìm “Ghost” 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: Chọn vùng (layer, frame, hoặc toàn bộ artboard) bạn muốn chuyển sang dạng skeleton.

Bước 2: Mở plugin Ghost trong Figma.

Bước 3: Chọn màu cho skeleton (ví dụ: xám #E0E0E0).

Bước 4: Nhấn Ghost! và xem plugin tự động chuyển toàn bộ phần tử thành wireframe placeholder.

Bước 5: Sử dụng kết quả cho các mục đích như:

  • Trình bày bố cục UX.
  • Tạo hiệu ứng loading skeleton trong prototype.
  • So sánh giữa layout “thô” và “hoàn thiện”.

Mẹo nhỏ:

  • Dùng Ghost để tạo phiên bản loading state của cùng một màn hình — ví dụ khi bạn muốn mô phỏng app đang tải dữ liệu.
  • Bạn có thể giữ lại layout gốc và duplicate ra bản “Ghost” để so sánh trực quan giữa hi-fi và lo-fi.

3. Kết luận

Ghost là một plugin nhỏ gọn nhưng cực kỳ hữu dụng cho bất kỳ designer nào muốn chuyển nhanh từ thiết kế chi tiết sang wireframe hoặc skeleton layout.
Không chỉ tiết kiệm thời gian, nó còn giúp bạn và đồng đội tập trung vào trải nghiệm người dùng (UX) thay vì bị phân tán bởi màu sắc hay chi tiết thị giác.

Nếu bạn đang tìm cách tạo skeleton loading hoặc mockup wireframe trong vài giây, Ghost chính là lựa chọn hoàn hảo.
Hãy thử “hóa ma” thiết kế của bạn ngay hôm nay và cảm nhận sự khác biệt trong quy trình sáng tạo!