Your stories are your design system.
One artifact between design and code. Figma is generated from it, edits round-trip back as pull requests, and what designers review is what ships.
How the loop closes
Generate the Figma view from your stories. Round-trip edits back as pull requests. The story file stays canonical end to end.
Generate the Figma design system from your stories
Inkbridge scans your Storybook stories and renders each one as a native Figma frame. What designers see in Figma is built from the same code that ships.
- 1
Install the npm package
Run pnpm add -D inkbridge in your Next.js project, then pnpm exec inkbridge setup to wire up the scanner routes.
- 2
Load the plugin in Figma Desktop
Plugins → Development → Import plugin from manifest, point at node_modules/inkbridge/manifest.json. One-time setup.
- 3
Generate the design system page
Run pnpm dev, then click Generate in the plugin. Every story becomes a Figma frame with the exact Tailwind styles.
Round-trip token edits back as pull requests
Designers adjust colour, spacing, or radius tokens in Figma. Inkbridge captures the diff and opens a PR against your stories — reviewed and merged the same way as any code change.
- 1
Edit design tokens in Figma
Update colours, spacing, or typography directly in your Figma file.
- 2
Preview the code diff
Inkbridge shows the exact Tailwind config and CSS changes before anything is committed.
- 3
Open a pull request
Push the changes as a GitHub PR with one click — ready for review and merge against the story file.
Stories are the source. Figma is generated. Edits round-trip back.
Two flows — both start and end in your stories. The story file stays canonical.
Generate Figma from your stories
Plugins → Inkbridge → Generate Design System Page
Push edits back as a pull request
Edit colours or spacing in Figma Variables — open a GitHub PR in one click
Edit in Figma Variables
Change a token value directly in Figma — no DTCG JSON editing required.
Preview the diff
Inkbridge shows exactly which Tailwind config lines will change before anything is committed.
Open a pull request
One click creates a branch, commits the updated tokens, and opens a PR ready for review.
Push to Code
Commit Message
PR Description (optional)
Figma was the first consumer. Now AI is too.
Your stories are the source of truth. Figma renders them — and now any AI agent can read the same design-system model over MCP, no Figma in the loop. Point an agent at your project and it generates new components that conform to your tokens and variants.
$ npx inkbridge mcplist_componentsEvery component with its kind, variant axes, and stories.
get_componentThe full resolved definition — classes, variants, states.
get_tokensYour design tokens — consumer-authored or the full merged map.
Next.js starter template
Pre-configured with Tailwind, Storybook, and Inkbridge. Clone and run pnpm dev.
Built to keep the story canonical
Every piece does one thing — make sure the Storybook story stays the source of truth between design and code.
Story-driven scanning
Inkbridge reads your Storybook stories — JSX, variants, decorators — and renders each one as a Figma frame with the exact Tailwind styles.
One model, every consumer
Your stories compile to one design-system model — rendered as a Figma page and read by AI agents over MCP. Tokens, components, themes, states; generated every run, always in sync.
Token round-trip
Edit colours, spacing, or radius in Figma; Inkbridge captures the diff and opens a PR against your stories — reviewable like any code change.
GitHub PRs from Figma
Push token edits straight to your repo as a pull request — no copy-paste, no manual sync step, no out-of-band edits.
Themes built in
Light, dark, and any custom themes you define in your tokens are rendered together — and bound to Figma Variables where Figma allows it.
Reads your existing stack
Tailwind v4, Storybook, Next.js, shadcn/ui — Inkbridge reads what’s already in your repo. No bespoke config, no parallel design source.
Frequently asked questions
The methodology, the setup, and the common questions.
Try the loop on your own stack
Clone the starter, run one install command, and generate a Figma design system from real Storybook stories in under five minutes. Free forever, no credit card.
One source of truth, every consumer in sync
Your stories are the source of truth, and every consumer stays in sync with them. Figma renders them as frames; AI agents read the same model over MCP — one canonical artifact, never diverging.