Tokens Bruecke
Convert Figma Variables to Design Tokens
Plugin Preview
About this plugin
TokensBrücke is a Figma plugin for converting Figma variables and styles into design-tokens JSON, fully compatible with the latest W3C Design Tokens specification. It also works as a standalone CLI tool via the Figma REST API.🔄 Export & ImportExport — convert Figma variables to a DTCG-compatible JSON file in one clickImport — load a design tokens JSON back into Figma, automatically creating variable collections, modes, and variables⚙️ Export optionsColor modes — HEX, RGBA, HSLA, and moreStyles support — include typography, color styles, grids, shadows, and blur effectsStyles placement — keep styles at the root or merge them into a specific collectionSplit by collection — export each Figma variable collection as its own .tokens.json fileDTCG keys — toggle between $value/$type and legacy value/type formatsVariable scopes — include Figma scope metadata in the outputOpacity format — export as decimal (0.1) or percentage (10%)Alias handling — automatically resolve and format aliases, with optional .value string inclusionFigma metadata — embed variableId, collectionId, and code syntax (Web/iOS/Android) into tokensOutput preview — inspect the generated JSON before exporting☁️ Server integrationPush the generated JSON directly to: JSONBin, GitHub (commit or PR), GitLab, or any custom URL with configurable headers and HTTP method.💻 CLI toolUse as an npm package (tokens-bruecke) to export tokens via the Figma REST API — no plugin UI required. Supports config files, OAuth tokens, and split-by-collection output.💾 Config autosaving — all settings are saved per Figma file automatically.📚 Full documentation on GitHub📣 FeedbackLeave a comment, or open an issue on GitHub.
Plugin Details
| Version | 76 |
|---|---|
| Created | June 24, 2023 |
| Last Updated | July 18, 2026 |
| Category | Software development |
| Creator | Pavel Laptev |
| Stats | 471 installs, 130 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Network Access:
There is a push method that uses a custom URL. This URL can be any
- Editor Types:figma
- Allowed Domains:
- *
More Like This
Discover other plugins in the Software development category.
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
Code Snippet Editor
Translate component variants, properties, and more into dynamic code snippets for your design system
GitHub
Connect Design to Code