ai plugin template
1.0.0
這是一個 Figma AI 插件模板，示範 Figma 插件內的串流 LLM 回應。此範本顯示：
該插件設定為使用 Next.js。
首先使用 create-next-app 建立此範本：
npx create-next-app@latest --example https://github.com/figma/ai-plugin-template/接下來，您需要將 OpenAI API 金鑰儲存在.env.local檔案中。您可以從 API 金鑰頁面取得 API 金鑰。在此專案的根目錄中建立一個.env.local檔案並新增您的 API 金鑰：
OPENAI_API_KEY= ***然後，運行開發伺服器：
npm i
npm run dev然後，您可以開啟 Figma 桌面應用程式並從該專案的清單檔案匯入外掛程式。您可以右鍵點選畫布並導覽至Plugins > Development > Import plugin from manifest... ，然後選擇{path to this project}/plugin/manifest.json中的manifest.json 。
您要編輯的主要文件是：
app/page.tsx ：將讓您更新插件iframe 。當您編輯文件時，頁面會自動更新，並讓您更新外掛程式的使用者介面。app/completion/route.ts ：這是插件的“伺服器”，也是與 OpenAI 對話的地方。您可以在此處更新發送到 GPT 的提示。plugin/manifest.json ：這是清單文件，可讓您更新插件的權限和編輯器類型。 在此範例中，我們將把 Next.js 應用程式發佈到 Vercel。您也可以發佈到任何其他支援 Next.js 的託管提供者。
OPENAI_API_KEY設定為您的 OpenAI API 金鑰。package.json檔案的siteURL部分以指向已部署的 URL。它看起來像https://your-site-here.vercel.app/ "config" : {
"siteURL" : " https://your-site-here.vercel.app/ "
}npm run build以建立指向您部署的 URL 的插件的生產版本。此範本在@/lib/figmaAPI處包含一個figmaAPI幫助程序，可讓您從iframe 內部執行插件程式碼。這對於避免 iframe <-> 插件 postMessage API 非常有用，並減少了需要編寫的程式碼量。
例子：
import { figmaAPI } from "@/lib/figmaAPI" ;
const nodeId = "0:2" ;
const result = await figmaAPI . run (
( figma , { nodeId } ) => {
return figma . getNodeById ( nodeId ) ?. name ;
} ,
// Any variable you want to pass to the function must be passed as a parameter.
{ nodeId } ,
) ;
console . log ( result ) ; // "Page 1"關於這個助手有幾點要注意：
