Figma là một công cụ mạnh mẽ để thiết kế và tạo mẫu giao diện, nhưng nó cũng có thể được mở rộng bằng các plugin để thêm chức năng tùy chỉnh. Tạo các plugin này có thể là một quá trình tẻ nhạt và tốn thời gian, nhưng với sự trợ giúp của ChatGPT, một mô hình ngôn ngữ lớn do OpenAI đào tạo, bạn có thể tạo mã cho các plugin chỉ bằng cách sử dụng mô tả về kết quả mà bạn muốn nhận.

Trong bài viết này, tôi sẽ trình bày cách sử dụng ChatGPT để tạo mã cho ba plugin khác nhau. Mã cho các plugin này sẽ được sử dụng nguyên trạng mà không có bất kỳ chỉnh sửa thủ công nào. Vì vậy, plugin đầu tiên sẽ thu gọn tất cả các lớp mở rộng trong danh sách lớp. Cái thứ hai sẽ tạo mã QR với khả năng tải xuống kết quả. Cái thứ ba sẽ tìm kiếm tên sản phẩm cũ và thay thế bằng tên mới trong mọi khối văn bản trên trang. Hấp dẫn? Tiếp tục nào!

Thu gọn plugin Nút

Plugin đầu tiên tôi muốn trình bày là plugin có thể thu gọn tất cả các nút như INSTANCE, FRAME, GROUP, v.v. khi người dùng chạy plugin. Tất nhiên, Figma có một phím tắt (ALT+L) thực hiện hành động tương tự, nhưng chúng ta sẽ khám phá khả năng của ChatGPT trong việc tạo các plugin đơn giản cho Figma để xem nó hoạt động như thế nào và mất bao lâu.

• Hiển thị ví dụ về plugin Figma tìm khung trên trang hiện tại và thu gọn khung con, nhóm, phiên bản ở tất cả các cấp độ lồng nhau. Sau đó thu gọn các khung cha được đặt trên canvas. Sau đó, đóng plugin và hiển thị thông báo có nội dung “Tác vụ đã hoàn tất”.
• 30 phút để có được kết quả làm việc và kiểm tra nó trong Figma.
• 40 phút để có được mã tối ưu hóa.

Như bạn có thể thấy, ChatGPT đang tạo ra một giải pháp không tối ưu với rất nhiều mã không cần thiết. Tuy nhiên, đoạn mã trên hoạt động vượt trội và có thể giải quyết các sự cố cụ thể trong Figma mà không cần chỉnh sửa thêm.

Như một bài tập bổ sung, chúng ta cũng có thể thử yêu cầu AI tối ưu hóa mã và sau vài lần thử, mã sẽ trông như thế này:

Kết quả của việc tối ưu hóa thật tuyệt vời! AI đã loại bỏ tất cả các phần không cần thiết của mã và chỉ để lại những phần quan trọng mang lại cho bạn kết quả giống như mã được tạo ban đầu.

Tuy nhiên, điều quan trọng cần lưu ý là việc yêu cầu AI tối ưu hóa mã mà không cung cấp ngữ cảnh và mục đích của nó có thể dẫn đến mã chỉ hoạt động một phần hoặc hoàn toàn không hoạt động.

trình cắm QR Generator

Plugin thứ hai là plugin mở cửa sổ Giao diện người dùng Figma và tạo mã QR với khả năng tải xuống kết quả dưới dạng tệp .png sau khi người dùng nhấp vào nút “Tạo”. Plugin này phức tạp hơn một chút so với plugin đầu tiên và yêu cầu bạn hiểu rõ những gì bạn muốn đạt được. Về cơ bản, nếu bạn yêu cầu ChatGPT tạo mã, nó thường sẽ đề xuất một giải pháp phức tạp có thể yêu cầu hiểu biết sâu hơn về quy trình phát triển. Mã ban đầu do AI tạo yêu cầu chia mã thành các tệp JS và HTML, cài đặt các gói npm với thư viện JavaScript và sử dụng các gói như Webpack hoặc Babel. Nếu bạn không quen thuộc với những công cụ này, bạn có thể gặp khó khăn và có thể từ bỏ ý tưởng tạo ra một giải pháp hiệu quả. Vì vậy, sau nhiều lần thử,

• Hiển thị ví dụ về mã JavaScript cho plugin Figma chỉ sử dụng tệp ui.html để tạo mã QR sau khi người dùng thêm URL vào trường nhập và nhấn nút “Tạo”. Plugin nên sử dụng thư viện “qrcodejs” làm liên kết đến CDN. Mã QR đã tạo sẽ được hiển thị trong cùng cửa sổ Giao diện người dùng Figma với khả năng tải xuống kết quả.
• 2 giờ để có được một kết quả làm việc. Hầu hết thời gian tôi dành để cố gắng tìm ra thư viện nào tôi nên sử dụng để tạo mã QR.

Nó hoạt động! Chỉ cần wow! Phải không? Điều duy nhất cần thiết là sự hiểu biết rõ ràng về kết quả mong muốn, khả năng xây dựng các yêu cầu phù hợp và tính đến tất cả các khía cạnh quan trọng cần được phản ánh trong giải pháp cuối cùng. Dưới đây là một ví dụ về mã được tạo bởi ChatGPT:

Thêm một bài tập nữa. Hãy yêu cầu AI làm đẹp giao diện người dùng hiện có và áp dụng một số kiểu CSS cho plugin của chúng ta.

Dưới đây là một ví dụ về các kiểu CSS do ChatGPT tạo ra:

Và đây là kết quả cuối cùng với các kiểu được áp dụng.

Tìm và thay thế plugin

Plugin thứ ba tìm kiếm các phiên bản của tên sản phẩm cũ và thay thế chúng bằng tên mới. Mặc dù không đặc biệt đáng chú ý từ góc độ phát triển, nhưng đây là ví dụ về cách AI có thể được sử dụng để khắc phục sự cố và cải thiện mã không hoạt động bằng cách sử dụng mô tả lỗi từ bảng điều khiển để xác định và giải quyết sự cố.

• Hiển thị một ví dụ về mã JavaScript không có “yêu cầu” cho plugin Figma sẽ thực hiện những việc sau: Không sử dụng các chức năng không đồng bộ, Tìm tất cả các nút (khung, nhóm, phiên bản, biểu tượng, v.v.) trên trang hiện tại bằng các nút văn bản có chứa các ký tự “Acronis Backup”, Thay thế “Acronis Backup” bằng “Acronis Cyber ​​Protect”, Đóng plugin, Hiển thị thông báo.
• 20 phút, bao gồm cả khắc phục sự cố, để có được kết quả hoạt động.

Nỗ lực thứ hai cũng không thành công. Tôi gặp một lỗi khác trong Figma và yêu cầu AI cải thiện mã một lần nữa.

Sau yêu cầu thứ hai, AI đã khuyến nghị thay đổi logic của plugin bằng cách kết hợp lệnh gọi giao diện người dùng Figma và chức năng nghe sự kiện. Hàm xử lý sự kiện ngụ ý rằng một sự kiện cụ thể phải xảy ra trong tệp ui.html chẳng hạn trước khi hàm được thực thi. Điều này bắt đầu giống như một giải pháp phức tạp không cần thiết có thể sẽ tốn một lượng thời gian đáng kể để khắc phục sự cố và đạt được mã chức năng.

Sau đó, để giải pháp không phức tạp, tôi đã yêu cầu AI không sử dụng chức năng lắng nghe sự kiện. Và cuối cùng, ChatGPT đã tạo mã hoạt động như mong đợi.

Dưới đây là một ví dụ về mã được tạo bởi ChatGPT:

Tóm lại là

Phát triển plugin cho Figma bằng ChatGPT có thể là một công cụ mạnh mẽ để tự động hóa các tác vụ cấp thấp và tạo các phần mã cụ thể. Tuy nhiên, điều quan trọng là bạn phải hiểu rõ mục tiêu của mình và các bước cần thiết để đạt được mục tiêu đó nhằm sử dụng ChatGPT một cách hiệu quả. Cũng cần lưu ý rằng mã do AI tạo có thể quá phức tạp và có thể yêu cầu tối ưu hóa. Ngoài ra, việc thiếu ngữ cảnh được cung cấp cho AI có thể dẫn đến việc tạo mã không hoạt động như mong đợi hoặc hoàn toàn không hoạt động.

Ngoài ra, ChatGPT rất lý tưởng để khắc phục sự cố vì nó có thể nhanh chóng tạo mã dựa trên các yêu cầu và thông tin đầu vào cụ thể. Hơn nữa, điều này có thể tiết kiệm đáng kể thời gian và công sức so với việc viết hoặc viết lại mã theo cách thủ công hoặc tra cứu các giải pháp khả thi trên Google ở ​​đâu đó trên Stackoverflow.

Thêm câu chuyện về các công cụ

• Trình tạo email cho Figma
• ffmpeg + ImageMagick. Chuyển đổi video thành GIF bằng cách sử dụng Terminal.app trên macOS
• Cách xây dựng plugin Phác thảo sẽ kết nối các biểu tượng từ thư viện của bạn với bất kỳ tài liệu bên ngoài nào
• Cách tối ưu hình ảnh bằng macOS Terminal + TinyPNG CLI

• Facebook
• Trung bình