Design token sync, diff & export — bridging Figma variables to production codebases.
🔗 Live demo → tokenbridge-roan.vercel.app
TokenBridge lets you paste two token sets (e.g. your Figma source and your codebase) and instantly see what's changed, what's been added, and what's been removed — with colour swatch previews and token type classification.
- Visual diff engine — compare two W3C-format token files side by side
- Colour swatch previews — see actual colours inline, not just hex strings
- Token type classification — automatically detects color, spacing, typography, radius, and shadow tokens
- Multi-format export — generate CSS variables, Tailwind config, or a JS object in one click
- Copy to clipboard — export and paste directly into your codebase
- React 19 + TypeScript
- Vite
- Tailwind CSS v3
git clone https://github.com/manilka005/tokenbridge.git
cd tokenbridge
npm install
npm run dev- Import — paste your source tokens (Figma) and target tokens (codebase) as JSON
- Diff — click Parse & Compare to see a visual breakdown of all changes
- Export — choose CSS variables, Tailwind config, or JS object and copy
TokenBridge accepts W3C Design Token format:
{
"color": {
"brand": { "value": "#6366f1" },
"surface": { "value": "#ffffff" }
},
"space": {
"md": { "value": "16px" }
}
}- Figma API integration — pull tokens directly from a Figma file
- VS Code extension — sync tokens without leaving your editor
- Token history — track changes across versions
- Team collaboration — shared token sets with conflict resolution
MIT