Back to Plugins
TokensBrücke

TokensBrücke

Convert Figma Variables to Design Tokens

variables to jsondesign tokenstokens generatortokensvariablesdtcgcode-generators

Plugin Preview

TokensBrücke 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

Version56
CreatedJune 24, 2023
Last UpdatedApril 10, 2026
CategorySoftware development
CreatorPavel Laptev
Stats413 installs, 119 likes
PricingFree

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:
    • *