Gần đây, tôi đã bắt đầu sử dụng một số công cụ AI để xây dựng sản phẩm, vì trào lưu vibe coding và vibe design ngày càng phổ biến. Tôi cũng đọc rất nhiều bài viết nói về việc AI có thể tự động hóa workflow, và thế là tôi bắt đầu tìm hiểu về ý tưởng này. Hiện tại, tôi đang trong quá trình nghiên cứu và rà soát lại workflow của mình để tùy chỉnh sao cho làm việc hiệu quả hơn.
Một ngày, tôi tình cờ đọc được bài viết của Prototypr và tôi cảm thấy rất thích thú. Ý tưởng xây dựng một plugin Figma hoàn toàn không cần coding thực sự khiến tôi phấn khởi, vì vậy tôi quyết định thử thách bản thân và tự build một plugin. Tôi nghĩ việc tạo plugin sẽ là một cách tuyệt vời để tự động hóa workflow của mình.
Ban đầu, tôi thử nghiệm với một số công cụ thân thiện hơn dành cho designers như Lovable và Anima, nhưng rồi tôi muốn thử thách bản thân hơn bằng Cursor. Điều này khiến tôi phải học thêm về coding (nếu có thể), vì công cụ này phù hợp hơn với developer thay vì designer. Và như mọi người đoán được, ban đầu tôi hoàn toàn không hiểu gì 😂.
Khi đó, tôi đã phải nhờ đến sự trợ giúp của các đồng nghiệp developer, và nếu như bạn không có, thì bài viết này sẽ hữu ích cho bạn. Tôi nghĩ sẽ thật tuyệt vời nếu ghi lại quá trình tôi tạo ra một plugin như thế nào, vì đây là sản phẩm đầu tiên tôi tự build bằng code. Nếu bạn là một designer, hãy thử làm một cái plugin cho riêng mình, chắc chắn sẽ rất thú vị!
Ban đầu, tôi không biết rằng mình cần phải vào Figma và tạo một package folder cho plugin. Tôi đơn giản như bao người khác, sẽ nhảy thẳng vào Cursor và viết một prompt thật dài để nó tự tạo ra cho tôi. Và kết quả là, tôi mất rất nhiều thời gian với việc chạy plugin khi nó không thể đọc được file manifest.json của tôi 🥲 (chưa hiểu tại sao, nhưng tôi đoán là do một số format lạ mà Cursor tự sinh ra khiến Figma không nhận diện được). Vì thế, tôi khuyên bạn nên làm theo từng bước trong Figma như sau:
Bạn có thể tham khảo thêm bài viết này để hiểu rõ hơn về ý nghĩa của từng file trong thư mục plugin của bạn.
Tôi chọn Cursor để viết code, nhưng bạn hoàn toàn có thể chọn một ứng dụng khác để viết, không cần phải giống tôi.
Như bao nguyên tắc học tập, chúng ta cần nắm vững lý thuyết trước khi lao vào thực hành. Thú thật, ban đầu tôi đã quá háo hức và lao vào viết prompt luôn, kết quả là tôi đã tiêu tốn rất nhiều quota 💸 chỉ để "trò chuyện" với Cursor mà không hiểu gì hết.
Vì vậy, bạn nên đọc qua một chút về Figma’s documentation và tham khảo các plugin examples. Đây là những tài liệu cực kỳ hữu ích giúp bạn hiểu rõ về các nguyên lý cơ bản trong việc viết code plugin, tránh gặp phải những lỗi khiến plugin không hoạt động hoặc ảnh hưởng đến quá trình review khi bạn submit lên cộng đồng.
Đến phần thú vị nhất rồi, giờ là lúc mở app Cursor và bắt đầu xây dựng plugin. Sau khi tạo plugin trong Figma xong, Figma sẽ tự động tạo ra một package file. Việc của bạn là import file này vào Cursor. Bạn chỉ cần nhấp chọn Open project > rồi chọn Folder plugin > và nhấn Open.
