How to Make a Figma Plugin with AI in 2026 (No Coding Skills Needed)

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

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.