Обзор возможностей ChatGPT для генерации кода для плагинов Figma из запросов на естественном языке.

Figma — это мощный инструмент для проектирования и прототипирования интерфейсов, но его также можно расширить с помощью плагинов для добавления пользовательских функций. Создание этих плагинов может быть утомительным и трудоемким процессом, но с помощью ChatGPT, большой языковой модели, обученной OpenAI, можно генерировать код для плагинов, используя только описание результата, которого вы хотите достичь.

В этой статье я продемонстрирую использование ChatGPT для генерации кода для трех разных плагинов. Код для этих плагинов будет использоваться как есть, без какого-либо ручного редактирования. Итак, первый плагин свернет все развернутые слои в списке слоев. Второй сгенерирует QR-код с возможностью загрузки результата. Третий плагин будет искать старое название продукта и заменять его новым в каждом текстовом блоке на странице. Звучит интересно? Давай сделаем это!

Плагин "Свернуть узлы"

Первый плагин, который я хочу продемонстрировать, — это тот, который может свернуть все узлы, такие как INSTANCE, FRAME, GROUP и т. д., когда пользователь запускает плагин. Конечно, в Figma есть сочетание клавиш (ALT+L), которое выполняет то же действие, но мы изучим способность ChatGPT создавать простые плагины для Figma, чтобы увидеть, как это будет работать и сколько времени это займет.

  • Покажите пример подключаемого модуля Figma, который находит фреймы на текущей странице и сворачивает дочерние фреймы, группы, экземпляры на всех уровнях вложенности. Затем сверните родительские кадры, размещенные на холсте. Затем закройте плагин и отобразите уведомление с текстом «Задача выполнена».
  • 30 минут, чтобы получить рабочий результат, а затем протестировать его в Figma.
  • 40 минут на получение оптимизированного кода.

Я просто повторно использовал сгенерированный код, и он работает безупречно! Ниже приведен пример кода, сгенерированного ChatGPT:

Как видите, ChatGPT генерирует неоптимальное решение с большим количеством ненужного кода. Тем не менее, приведенный выше код работает «из коробки» и может решить определенные проблемы в Figma без дополнительной правки.

В качестве дополнительного упражнения мы также можем попробовать попросить ИИ оптимизировать код, и после нескольких попыток код будет выглядеть так:

Результат оптимизации потрясающий! ИИ удалил все ненужные части кода и оставил только важные, которые обеспечивают тот же результат, что и изначально сгенерированный код.

Однако важно помнить, что обращение к ИИ с просьбой оптимизировать код без предоставления контекста и цели может привести к тому, что код будет работать лишь частично или не будет работать вообще.

Подключаемый модуль генератора QR

Второй плагин — это тот, который открывает окно пользовательского интерфейса Figma и генерирует QR-код с возможностью загрузки результата в виде файла .png после того, как пользователь нажмет кнопку «Создать». Этот плагин немного сложнее первого и требует четкого понимания того, чего вы хотите достичь. По сути, если вы попросите ChatGPT сгенерировать код, он, как правило, предложит сложное решение, которое может потребовать более глубокого понимания процесса разработки. Первоначальный код, сгенерированный ИИ, требовал разделения кода на файлы JS и HTML, установки пакетов npm с библиотеками JavaScript и использования сборщиков, таких как Webpack или Babel. Если вы не знакомы с этими инструментами, вы можете застрять и отказаться от идеи создания работающего решения. Поэтому после нескольких попыток я попросил ChatGPT предоставить пример кода, в котором используется только один HTML-файл.

  • Покажите пример кода JavaScript для подключаемого модуля Figma, который использует только файл ui.html для создания QR-кода после того, как пользователь добавит URL-адрес в поле ввода и нажмет кнопку «Создать». Плагин должен использовать библиотеку «qrcodejs» в качестве ссылки на CDN. Сгенерированный QR-код должен отображаться в том же окне пользовательского интерфейса Figma с возможностью загрузки результата.
  • 2 часа, чтобы получить рабочий результат. Большую часть времени я потратил на то, чтобы выяснить, какую библиотеку следует использовать для создания QR-кода.

В качестве первого результата я получил плагин с неработающей кнопкой «Скачать». Это обычное дело, когда ChatGPT допускает ошибки, например, использует просроченные или несуществующие ссылки на внешние ресурсы или генерирует код, который не работает, или вам приходится много манипулировать кодом, прежде чем он начнет работать. Однако мы можем попросить ИИ решить проблему, и в большинстве случаев ее можно решить за несколько попыток.

Оно работает! Единственными требованиями здесь являются четкое понимание желаемого результата, умение формировать правильные запросы и учет всех важных аспектов, которые должны быть отражены в конечном решении. Ниже приведен пример кода, сгенерированного ChatGPT:

Еще одно дополнительное упражнение. Давайте попросим ИИ украсить существующий пользовательский интерфейс и применить некоторые стили CSS к нашему плагину.

Ниже приведен пример стилей CSS, сгенерированных ChatGPT:

И это окончательный результат с примененными стилями.

Найти и заменить плагин

Третий плагин ищет экземпляры старого названия продукта и заменяет их новым. Хотя это не особо примечательно с точки зрения разработки, оно служит примером того, как ИИ можно использовать для устранения неполадок и улучшения нефункционального кода с помощью описания ошибок из консоли для выявления и устранения проблем.

  • Покажите пример кода JavaScript без плагина «require» для Figma, который будет делать следующее: не использовать асинхронные функции, находить все узлы (фрейм, группу, экземпляр, символ и т. д.) на текущей странице. с текстовыми узлами, содержащими символы «Acronis Backup», «Заменить Acronis Backup» на «Acronis Cyber ​​Protect», «Закрыть подключаемый модуль», «Показать уведомление».
  • 20 минут, включая устранение неполадок, чтобы получить рабочий результат.

Приведенный выше код не работает. Это обычное явление при использовании кода, сгенерированного ИИ, и определить следующие шаги может быть сложно. В моем случае я получил сообщение об ошибке в Figma и использовал ChatGPT, чтобы улучшить сгенерированный код и решить проблему.

Вторая попытка также не увенчалась успехом. Я получил еще одну ошибку в Figma и попросил ИИ снова улучшить код.

После второго запроса AI рекомендовал изменить логику плагина, включив вызов пользовательского интерфейса Figma и функцию прослушивания событий. Функция прослушивателя событий подразумевает, что перед выполнением функции должно произойти определенное событие, например, в файле ui.html. Это начало выглядеть как излишне сложное решение, которое, вероятно, потребовало бы значительного количества времени для устранения неполадок и создания функционального кода.

Затем, чтобы не усложнять решение, я попросил ИИ не использовать функцию прослушивания событий. И, наконец, ChatGPT сгенерировал код, который работает так, как ожидалось.

Ниже приведен пример кода, сгенерированного ChatGPT:

В заключение

Разработка плагинов для Figma с использованием ChatGPT может стать мощным инструментом для автоматизации низкоуровневых задач и создания определенных частей кода. Однако важно иметь четкое представление о своих целях и шагах, необходимых для их достижения, чтобы эффективно использовать ChatGPT. Также важно помнить, что код, сгенерированный ИИ, может быть слишком сложным и может потребовать оптимизации. Кроме того, отсутствие контекста, предоставляемого ИИ, может привести к генерации кода, который не работает должным образом или вообще не работает.

Кроме того, ChatGPT отлично подходит для устранения неполадок, поскольку он может быстро генерировать код на основе конкретных входных данных и требований. Более того, это может сэкономить значительное количество времени и усилий по сравнению с написанием или переписыванием кода вручную или поиском возможных решений где-нибудь на Stackoverflow.

Другие истории об инструментах

Подпишитесь на Acronis Design