Bạn vừa tạo xong một bộ Component “Nút bấm” (Button) cực kỳ chi tiết với đầy đủ các thuộc tính:

  • Type: Primary, Secondary, Text.
  • Size: Small, Medium, Large.
  • State: Default, Hover, Pressed, Disabled.
  • Icon: Left, Right, None.

Tuyệt vời! Nhưng khoan đã, nếu nhân tất cả các trường hợp đó lên (3 x 3 x 4 x 3), bạn có hơn 100 biến thể (variants) khác nhau. Làm sao để trình bày tất cả chúng ra một cách gọn gàng để Developer nhìn vào là hiểu ngay, hoặc để chính bạn kiểm tra xem có biến thể nào bị lỗi hiển thị không?

Việc ngồi xếp từng cái nút ra hàng lối thủ công là một cơn ác mộng. Hãy để plugin Propstar làm việc đó thay bạn chỉ trong một cú click chuột.

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

Plugin Propstar là một plugin chuyên dụng để tạo tài liệu (documentation) cho các Component Set. Nó tự động lấy tất cả các biến thể (variants) và các thuộc tính (properties) của Component để sắp xếp thành một bảng ma trận gọn gàng, có nhãn (label) rõ ràng.

Thay vì nhìn vào một đám lộn xộn trong khung tím của Component Set, Propstar giúp bạn “trải” tất cả ra mặt phẳng để dễ dàng đối chiếu.

Tính năng chính:

  • Tạo bảng tự động: Tự động sinh ra một Frame mới chứa bảng tổng hợp tất cả các trường hợp có thể xảy ra của Component.
  • Gán nhãn rõ ràng: Các cột và hàng sẽ được đặt tên theo đúng tên Property bạn đã đặt (ví dụ: Cột Size, Hàng State…).
  • Sạch sẽ & Gọn gàng: Plugin tự động tính toán khoảng cách padding/spacing hợp lý để bảng trông chuyên nghiệp như một bản hướng dẫn sử dụng.

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

  • Design System Manager: Cần tạo tài liệu hướng dẫn (Guidelines) cho team sử dụng.
  • UI Designer: Cần QA (Quality Assurance) lại component của mình. Nhìn vào bảng Propstar, bạn sẽ phát hiện ngay nếu có một nút “Primary – Small – Hover” nào đó bị sai màu hoặc lệch icon.
  • Developer: Cần một cái nhìn tổng quan về tất cả các trạng thái để code CSS chính xác mà không phải mò mẫm click từng cái trong Figma.

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

  • Tìm “Propstar” 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 Component Set mà bạn muốn tạo bảng. Lưu ý: Bạn phải chọn vào cái khung nét đứt màu tím chứa các variants, không phải chọn từng variant lẻ.

Bước 2: Mở plugin Propstar.

Bước 3: Plugin sẽ tự động phân tích và ngay lập tức tạo ra một Frame mới bên cạnh, chứa bảng tổng hợp các variants.

Bước 4: Kiểm tra kết quả. Bạn sẽ thấy một bảng ma trận với trục dọc và trục ngang tương ứng với các Properties của bạn.

Mẹo nhỏ:

  • Cẩn thận với số lượng biến: Nếu Component của bạn có quá nhiều thuộc tính (ví dụ 5-6 properties), số lượng biến thể có thể lên tới hàng nghìn (Combinatorial explosion). Khi đó chạy plugin có thể khiến Figma bị đơ hoặc bảng tạo ra quá khổng lồ. Hãy chia nhỏ Component set nếu cần thiết.
  • Đặt tên Property chuẩn: Propstar lấy tên Property để làm tiêu đề cột/hàng. Vì vậy hãy đặt tên trong phần Variant panel thật chuẩn (ví dụ: dùng “State” thay vì “Property 1”) để bảng xuất ra dễ hiểu nhất.
  • Dùng để bàn giao (Handoff): Đặt bảng Propstar này vào trang “Hand-off” cho Dev. Họ sẽ cực kỳ biết ơn vì có thể nhìn thấy mọi trạng thái của nút bấm chỉ trong một cái liếc mắt.

3. Kết luận

Plugin Propstar là minh chứng cho câu nói “làm việc thông minh hơn, không phải vất vả hơn”. Nó biến công việc làm tài liệu nhàm chán và tốn thời gian trở thành niềm vui chỉ trong tích tắc.

Nếu bạn muốn Design System của mình trông chuyên nghiệp, mạch lạc và dễ bảo trì, Propstar chắc chắn là plugin phải nằm trong danh sách “yêu thích” của bạn. Thử ngay để thấy Component của bạn “tỏa sáng” như thế nào nhé!