chatgpt figma plugin

Плагин ChatGPT Figma

v0.3.6

Экспериментальный плагин ChatGPT для Figma

---

Обзор

Этот экспериментальный плагин позволяет дизайнерам использовать ChatGPT Open AI непосредственно в Figma. «Создание» изображения облегчается с помощью Lexica и Unsplash. Также есть небольшая панель для выполнения кода и мини-консоль.

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

Посмотреть демо

---

Начиная

Предварительные условия

1. Создать учетную запись OpenAI
2. Убедитесь, что у вас установлен Node 18.0+ . Я рекомендую nvm для управления версиями Node.

Загрузите и создайте

1. Клонируйте этот репозиторий в каталог по вашему выбору. git clone https://github.com/frederickk/chatgpt-figma-plugin.git
2. Установите необходимые зависимости npm install
3. Создайте файл .env и добавьте свои учетные данные для входа в OpenAI OPENAI_EMAIL="..." и OPENAI_PASSWORD="..."
4. Сборка npm run build

Установить и запустить

1. Запустите промежуточный сервер ChatGPT npm run serve .
2. Загрузите плагин в разделе «Плагины Figma» > «Разработка» > «Импортировать плагин из манифеста…».
3. И вуаля!

---

Использование

Просто введите вопрос или запрос для ChatGPT, нажмите кнопку «Отправить » (значок бумажного самолетика), и (через несколько секунд) результаты будут следующими:

1. создать новое текстовое поле или
2. заменить текстовое содержимое выбранного текстового поля
3. ошибка... попробовать еще раз?

Откройте панель Lexica , чтобы найти в Lexica работы, созданные искусственным интеллектом и соответствующие вашему описанию.

Откройте панель «Код» и введите любой действительный JavaScript-скрипт API плагина Figma, который вы хотите выполнить. ️ Будь осторожен! это делается с помощью eval() и не самое безопасное ️ .

Откройте панель «Консоль» , чтобы увидеть небольшой вывод консоли и увидеть, что происходит за кулисами.

---

Строить

Команда	Описание
npm run build	Запускает процесс сборки Webpack один раз
npm run clean	Очищает ./build и все кэшированные файлы.
npm run dev	Запускает процесс сборки Webpack и отслеживает изменения; восстановление по мере необходимости
npm run dev:serve	То же, что и для разработки, но с доступом к пользовательскому интерфейсу через http://localhost:8080
npm run serve	Запускает промежуточный сервер ChatGPT API http://localhost:3000 . Это необходимо для работы плагина.