Token Forge - Variables Tokens Builder

About this plugin

🚀 Key featuresEasily export your Figma variables (colors, typography, spacing, etc.) to JavaScript - TypeScript (.ts) / CSS (.css) / SCSS (.scss) / JSON / ARB (for Flutter) / Swift IOS / CSV.GitHub / GitLab Synchronization: Connect directly to your repository to push generated tokens via Pull Requests and fetch source files to update your Figma variables, ensuring a single source of truth.Google Spreadsheet Synchronization (Export / Import)External Library Support: export variable collections synced from other (library) files via the Team Library, without needing access to the source file.You can import your Figma variables, styles and effects directly into the plugin from W3C JSON files, TypeScript (.ts) source files, or ZIP archives. You can also instantly bootstrap your projects by importing ready-to-use starters, such as Tailwind CSS (v4) or standard Figma Design Systems, ideal for quickly duplicating, migrating, or replicating a design system without starting from scratch.W3C Design Token compatibility: support for the standard format for optimal interoperability between tools (with integrated Figma metadata system).Penpot Export SupportPreserves all aliases and references between variables.Organization by collections with clear hierarchy.Automated component analysis and generates a complete, structured breakdown of its variants, properties, and visual styles format JSON / YAML (in BETA).Component Audit Export: Generate audit-ready CSV reports listing selected components with direct deep links (URLs) to the Figma node perfect for tracking in spreadsheets (Excel, Airtable) or automation pipelines.⚙️ Advanced optionsConfiguration Presets : Save and load export/import profiles (format, casing, W3C options, alias rules…) to switch workflows instantly.Custom prefix for your exports.Key Naming Convention Options.Export by mode (mode selection)Theme Wrapper Selectors (CSS/SCSS) : Automatically wrap multi-mode variables into theme-specific selectors (e.g., :root, .dark-mode) within a single file for seamless theme management.Unit conversion (px ↔ rem, etc.) (Manages Exception by Groups)Colors conversion (HEXA ↔ OKLCH, etc.) (Manages Exception by Collections)Responsive management (@media / clamp()) (in BETA)Token References choices (Alias / Real Values)Style export management (Text / Effects)Typography Mapping: Remap font weights to numeric values and automatically append generic CSS fallbacks (e.g., sans-serif) to your font families for better standards compliance.🧰 Toolbox (Utility features)Swap variablesVariables Injector (BETA): Inject additional variable groups into an existing collection or perform manual updates from JSON tokens (W3C/DTCG). Ideal for modular system growth and precise synchronization control.Token Extractor (BETA): Ingest existing code files (CSS, SCSS, TypeScript) to automatically reconstruct variables, collections, and modes directly in Figma. It intelligently parses deep structures and handles complex color formats like OKLCH or RGBA to bridge the gap from code to design.🖥️ Intuitive interfaceReal-time preview.Dynamic token search in the preview.Adaptable light/dark theme.Smooth navigation between files.File structure analysis (token count statistics, types, etc.).✨ Handy featuresQuick copy of generated code.Individual or batch download.Support for documentation comments.🎯 Who is it for?Developers and designers who want to easily transfer variables from Figma to code, preserving aliases and hierarchy, for direct integration into the development environment. Ideal for workflows that don't want to rely on complex synchronization tools.Created by Robin Lopezbento.me/robinlopez