Inkbridge
Your codebase as a Figma design system
Inkbridge scans your Tailwind components and Storybook stories, reads your design tokens, and builds a complete design system page in Figma — automatically.
A complete Figma design system, generated automatically
The plugin reads your Storybook stories and renders every variant, state, and size as native Figma frames — then lets you push token changes straight back to your repo.
Run "Generate Design System Page" from the plugin
Plugins → Inkbridge → Generate Design System Page
Button
Default
State Matrix
| StatesVariants | Default | Destructive | Outline |
|---|---|---|---|
| default | Primary Action | Primary Action | Primary Action |
| focus-visible | Primary Action | Primary Action | Primary Action |
| disabled | Primary Action | Primary Action | Primary Action |
| hover | Primary Action | Primary Action | Primary Action |
Variants
Sizes
Push token changes back to your codebase
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)
Two ways to work
Go from code to Figma, or take Figma changes back to your codebase.
Generate Figma frames from your components
Scan your Tailwind React components and render them as native Figma frames — automatically.
- 1
Install the Figma plugin
Add Inkbridge to your Figma workspace in one click.
- 2
Connect your repository
Link your GitHub repo so the plugin knows where your components live.
- 3
Scan your Storybook stories
The plugin reads your stories and generates pixel-perfect Figma frames from your Tailwind classes.
Push design changes back to your codebase
Adjust tokens or components in Figma and ship the changes directly as a pull request.
- 1
Edit design tokens in Figma
Update colours, spacing, or typography directly in your Figma file.
- 2
Preview the code diff
Inkbridge shows you the exact Tailwind config changes before anything is committed.
- 3
Open a pull request
Ship the changes as a GitHub PR with one click — ready for review and merge.
Next.js starter template
Pre-configured with Tailwind, Storybook, and Inkbridge — ready to clone.
Everything you need
From Figma tokens to production-ready Tailwind code — without the manual work.
Token Export
Extract colors, typography, and spacing directly from Figma Variables into your Tailwind config.
Component Scanning
Automatically scan your React codebase and generate matching Figma components from Storybook stories.
GitHub Integration
Push design token updates as pull requests directly from Figma — no manual copy-paste.
Multi-theme Support
Export multiple color themes in one pass — light, dark, and custom brand palettes.
Storybook Sync
Storybook stories become Figma frames. Design and code stay in sync automatically.
Zero Config
Drop in the plugin, point it at your repo — no build step or custom setup required.
Frequently asked questions
Everything you need to know before getting started.
Keep your code and design in sync
Start with our free plan and generate your first Figma components in minutes. No credit card required.