ai plugin template
1.0.0
これは、Figma プラグイン内のストリーミング LLM 応答を示す Figma AI プラグイン テンプレートです。このテンプレートは次のことを示します。
このプラグインは 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セクションを更新できます。 https://your-site-here.vercel.app/のようになります。 "config" : {
"siteURL" : " https://your-site-here.vercel.app/ "
}npm run build実行して、デプロイされた URL を指すプラグインの実稼働ビルドを作成します。このテンプレートには、iframe 内からプラグイン コードを実行できるfigmaAPIヘルパー@/lib/figmaAPIにあります) が含まれています。これは、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"このヘルパーについて注意すべき点がいくつかあります。
