Guides

A Figma plugin template with analytics built in.

One command writes a Figma plugin project for React, Vue, Svelte or vanilla TypeScript, with Vite or esbuild, tode wired in, and the files a coding agent needs to work in it.

, by Ilia

Every plugin I start begins the same way: copy the last plugin, delete most of it, fix the manifest, remember how the two threads talk, and add analytics last, if at all. I wrote a generator so that the boring half of that is one command.

npm create @tode-sdk@latest my-plugin

What the existing scaffolders do well

Two tools already do this job and I borrowed from both. plugma composes a project from layers, keeps the manifest in the root where you can read it, splits src/main from src/ui with a tsconfig each, and can show the UI in a normal browser tab. create-figma-plugin has typed events between the threads, a small settings helper over clientStorage, and an esbuild setup that targets exactly what the sandbox runs. If you use either, keep using it.

What neither does: pick a bundler, wire analytics, or explain the project to a coding agent. Those three are the whole reason this one exists.

What you choose

The UI framework: React, Vue, Svelte or vanilla TypeScript. The bundler: Vite, with one config file per thread, or esbuild, with one build script and no config. Every one of the eight combinations is generated and built in CI on every push, so none of them is the neglected one.

What is already wired

  • manifest.json with the currentuser permission and the two tode domains in networkAccess. A check script keeps it that way.
  • tode.init() in the main thread, with the key read from .env at build time. No key, no analytics, and the plugin still runs.
  • The adapter mounted in the UI, which is what records sessions.
  • Two example events named the way the naming guide says: rectangles_created with a metric, and help_opened.
  • Typed messages between the threads, a test per main-thread module, lint, CI.

Made for agents

Most plugins I see now are written with an agent in the loop, and the agent's first mistake is always the same: DOM code in the sandbox, or figma.* in the iframe. The template makes both a type error, and AGENTS.md says so up front, along with the commands and how to add a feature. CLAUDE.md includes it.

npm run check is the one command that answers "is this fine": typecheck for both threads, lint, tests, build, manifest. npm run preview opens the UI in a browser with the main thread mocked, so an agent with a browser tool can click through it without Figma. And the generator never prompts without a terminal: every choice is a flag, --yes fills the rest.

Where it lives

The generator is create-tode-plugin. Its React + Vite output is kept as a GitHub template at figma-plugin-template-with-tode, regenerated on every release, so "Use this template" gives you the same thing as the command. The docs page is Start from a template. Both repos are MIT.