chatgpt figma plugin

ChatGPT Figma 插件

v0.3.6

Figma 的實驗性 ChatGPT 插件

---

概述

這個實驗性插件允許設計人員直接在 Figma 中利用 Open AI 的 ChatGPT。 Lexica 和 Unsplash 促進了圖像「創建」。還有一個用於執行程式碼的小面板和一個迷你控制台。

由於該插件是實驗性的，並且利用非官方的 ChatGPT API，因此它只能在“開發人員模式”下運行，並且可能隨時中斷或停止工作。您應該對終端相當滿意，因為設定有點繁瑣，考慮到當前的 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 中搜尋與您給定描述相符的 AI 生成的作品。

開啟「程式碼」面板並輸入您想要執行的任何有效的 Figma 外掛程式 API javascript。 ️當心！這是使用eval()完成的，並不是最安全的️ 。

打開控制檯面板以顯示一些控制台輸出，以便您可以看到幕後發生的情況。

---

建造

命令	描述
npm run build	執行一次 Webpack 建置流程
npm run clean	清理./build和所有快取的文件
npm run dev	運行 Webpack 建置程序並監視更改；必要時重建
npm run dev:serve	與 dev 相同，但可以透過http://localhost:8080存取 UI
npm run serve	運行 ChatGPT API 中間伺服器http://localhost:3000 。這是插件運行所必需的。