This is an Figma AI plugin template that demonstrates streaming LLM responses inside of a Figma plugin. This template shows:
This plugin is set up to use Next.js.
First create this template using create-next-app:
npx create-next-app@latest --example https://github.com/figma/ai-plugin-template/
Next you need to store you OpenAI API key in the .env.local
file. You can get an API key from the API keys page. Create a .env.local
file in the root of this project and add your API key:
OPENAI_API_KEY=***
Then, run the development server:
npm i
npm run dev
You can then open up the Figma desktop app and import a plugin from the manifest file in this project. You can right click on the canvas and navigate to Plugins > Development > Import plugin from manifest...
and select the manifest.json
in {path to this project}/plugin/manifest.json
.
The main files you'll want to edit are:
app/page.tsx
: will let you update the plugin iframe
. The page auto-updates as you edit the file and will let you update the user interface of your plugin.app/completion/route.ts
: This is the "server" of the plugin and is what talks to OpenAI. This is where you can update the prompt that you are sending to GPT.plugin/manifest.json
: this is the manifest file that will let you update the permissions and editor types of your plugin.In this example we will be publishing the Next.js app to Vercel. You can also publish to any other hosting provider that supports Next.js.
OPENAI_API_KEY
to your OpenAI API key.
siteURL
section of your package.json
file to point to the deployed URL. It will look something like https://your-site-here.vercel.app/
"config": {
"siteURL": "https://your-site-here.vercel.app/"
}
npm run build
to create the production build of your plugin that points to your deployed URL.This template includes a figmaAPI
helper at @/lib/figmaAPI
that lets you run plugin code from inside of the iframe. This is
useful for avoiding the iframe <-> plugin postMessage API and reduces the amount of code you need to write.
Example:
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"
A few things to note about this helper: