Table of Contents
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
- Clone the template. git clone https://github.com/figma/plugin-samples and pick a React template, or run pnpm create @figma/plugin.
- 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.
- 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."
- Register in manifest.json. Declare plugin name, API version, main (code.js), ui (ui.html), and commands/menu items.
- Test locally. In Figma desktop: Plugins → Development → Import plugin from manifest. Changes to code require re-running the plugin.
- Add AI features responsibly. If calling AI APIs, proxy through a backend. Never ship API keys in the bundle.
- 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.