TokensBrücke
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 | 56 |
|---|---|
| Created | June 24, 2023 |
| Last Updated | April 10, 2026 |
| Category | Software development |
| Creator | Pavel Laptev |
| Stats | 413 installs, 119 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.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
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.
SkewDat
Skew any layer or group with all layers preserved to edit.