Want to skip the setup?
Clone the starter template — it's pre-configured with Next.js, Tailwind v4, Storybook, and the inkbridge routes already wired up. Just run pnpm dev and load the plugin in Figma.
Or wire it into an existing project:
Before you begin
Make sure your project has all of these:
- ✓Figma Desktop — the browser version blocks localhost connections. Download from figma.com/downloads
- ✓Node.js 22 — check with
node --version - ✓pnpm — install with
npm i -g pnpmif missing - ✓Next.js project with TypeScript and Tailwind CSS v4
- ✓Storybook set up with at least a few
*.stories.tsxfiles — the plugin scans these to generate Figma frames
Setup steps
Install inkbridge
In your project root:
pnpm add -D inkbridge
pnpm exec inkbridge setupsetup creates both scanner/token API endpoints (/api/inkbridge/scan-components and /api/inkbridge/patch-tokens), generates inkbridge.config.json with auto-detected Storybook component paths, and adds .inkbridge/ to your .gitignore. It doesn’t add any package.json scripts — the plugin works through the API routes via your normal pnpm dev. (Pass --dev if you’re developing the plugin itself and want the maintainer-only local-link scripts.)
Load the plugin in Figma Desktop
Go to Plugins → Development → Import plugin from manifest and select:
node_modules/inkbridge/manifest.jsonFigma remembers this path — you only do this once. Your component data is always scanned live on each generate. Run pnpm update inkbridge only when a new inkbridge version is released with rendering improvements.
Start your dev server
Start your Next.js dev server:
pnpm devThe plugin auto-discovers your server on port 4000, 3000, or 5173 — whichever responds first.
Generate your design system
In Figma Desktop go to Plugins → Development → Inkbridge → Generate Design System Page.
The plugin scans your Storybook stories on demand and builds a dedicated Design System page in Figma with colour tokens, typography, spacing, and every component variant.
pnpm dev is running in your terminal, then click Retry inside the plugin.The inkbridge CLI
Once installed, the inkbridge binary is available via pnpm exec:
inkbridge setup— wire up the API routes +inkbridge.config.json+.gitignore.--devadds maintainer scripts,--forcerefreshes route templates,--dry-runpreviews.inkbridge path— print the installedmanifest.jsonpath (paste into Figma Desktop’s plugin import dialog).inkbridge skill install— drop the inkbridge AI skill into.claude/skills/so Claude Code can answer plugin questions with the right context.