#Start from a template

If the plugin does not exist yet, do not wire the SDK by hand. One command writes a project with the manifest, the init call, the UI adapter, tests, lint, CI and the files a coding agent needs.

npm create @tode-sdk@latest my-plugin

It asks four things: the directory, the UI framework (React, Vue, Svelte, vanilla TypeScript), the bundler (Vite or esbuild) and, optionally, your tode API key. Skip the key and the plugin runs with analytics off until you add it to .env.

1. Run it in Figma

   Terminal

   Copy

   cd my-plugin
   npm run dev

   In Figma Desktop: Plugins → Development → Import plugin from manifest → pick manifest.json. Turn on "Hot reload plugin" in the same menu and every save reloads the plugin.

2. Add the key

   Register the plugin in the dashboard to get a key, put it in .env as TODE_API_KEY=... and rebuild. The key is injected into the main bundle at build time and the plugin starts sending events.

3. Check

   Terminal

   Copy

   npm run check

   Typecheck for both threads, lint, the main-thread tests, a production build and a manifest check in one command. The generated CI workflow runs the same thing.

#What is already wired

• manifest.json has permissions: ["currentuser"] and the two processing.usetode.dev entries in networkAccess.allowedDomains, plus documentAccess: "dynamic-page".
• src/main/main.ts calls tode.init({ apiKey }) after figma.showUI(). The key comes from __TODE_API_KEY__, which the bundler defines from .env.
• The UI mounts the adapter for the framework you picked (useTode(), createTodeStore() or new TodeClient()), which records sessions.
• Two example events: rectangles_created with the count as a metric, from the main thread, and help_opened from the UI.
• Typed messages between the threads in src/shared/messages.ts, a figma.clientStorage helper and a test for each main-thread module.

#For coding agents

• AGENTS.md explains the two threads, the commands and how to add a feature. CLAUDE.md includes it.
• npm run check is the one verification command; its exit code is the answer.
• npm run preview opens the UI in a browser tab with the main thread mocked, so an agent with a browser tool can click through it. Nothing reaches tode from there.
• skills/figma-plugin-tode/SKILL.md holds the sandbox rules that trip agents.
• The CLI never prompts without a TTY. Give every choice as a flag or pass --yes:

npm create @tode-sdk@latest my-plugin -- --framework react --bundler vite --yes --no-install

--list prints the matrix as JSON.

#Flags

#Source

The generator is kolebayev/create-tode-plugin. Its React + Vite output is kept as a GitHub template at kolebayev/figma-plugin-template-with-tode for "Use this template" and degit. Both are MIT.