How to Create a Figma Plugin with AI in 2026 (Step-by-Step Guide)

Quick Answer

Use the official Figma plugin template with TypeScript and React, scaffold with Cursor, and publish free or paid to the Figma Community. Plugins run in a sandboxed iframe communicating with Figma's scene graph via postMessage.

• Time to first plugin: 4-6 hours
• Cost: $0 (free publishing)
• Stack: TypeScript, React, Figma Plugin API

What You'll Need

• Figma desktop app (plugins won't run in browser during dev)
• Node.js 20+, pnpm
• Cursor or Claude Code
• Figma account (free)

Steps

1. Clone the template. git clone https://github.com/figma/plugin-samples and pick a React template, or run pnpm create @figma/plugin.
2. Understand the two contexts. code.ts runs in Figma's sandbox with scene graph access. ui.html is an iframe that can use any web tech but can't touch nodes directly — they communicate via postMessage.
3. Build with AI. Prompt Cursor: "In code.ts, create a function that iterates all selected frames and renames them to PascalCase. Send results to UI via postMessage." Then: "Build a React UI that receives results and renders a list."
4. Register in manifest.json. Declare plugin name, API version, main (code.js), ui (ui.html), and commands/menu items.
5. Test locally. In Figma desktop: Plugins → Development → Import plugin from manifest. Changes to code require re-running the plugin.
6. Add AI features responsibly. If calling AI APIs, proxy through a backend. Never ship API keys in the bundle.
7. Publish. Right-click plugin → Publish new plugin. Add icon, cover, description, tags. Review takes 2-5 days.

Common Mistakes

• Calling Figma APIs from UI: Won't work — only code.ts has scene graph. Use postMessage.
• Forgetting figma.closePlugin(): Causes memory leaks.
• Blocking on huge selections: Batch operations every 100 nodes with setTimeout to keep Figma responsive.
• Shipping large bundles: Figma loads plugins quickly only if under ~500KB.

Top Tools

Tool	Best For	Price
@figma/plugin-typings	TypeScript types	Free
Figma Plugin API docs	Reference	Free
Figma Community	Distribution	Free
Plugma	Vite-based plugin dev	Free
create-figma-plugin	Yeoman alternative	Free

FAQs

Q: Can Figma plugins be paid? Yes — as of 2024, Figma supports paid plugins via Stripe integration.

Q: Can I access the network? Only from the UI iframe, and only to allowed origins declared in networkAccess in manifest.

Q: Does my plugin work in Figma Jam and Slides? You declare editorType in manifest — figma, figjam, or slides.

Q: How do I share plugins privately with a team? Publish as "Private" — only Figma orgs you share with can install.

Q: Can plugins modify files offline? No — they run in the Figma client, which requires internet.

Q: What's the bundle size limit? Technically ~4MB, but aim for under 1MB for instant loads.

Conclusion

Figma plugins are a high-leverage way to reach designers. Solve one repetitive design pain — renaming, color swapping, handoff — and build a following. AI makes the scene graph API painless.