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 (v3 or 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/figma/scan-components and /api/figma/patch-tokens) and adds figma:dev and figma:scan scripts to your package.json automatically.
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 figma: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 figma:dev is running in your terminal, then click Retry inside the plugin.