Token Forge

About this plugin

🚀 Key features

1. Easily export your Figma variables (colors, typography, spacing, etc.) to JavaScript - TypeScript (.ts) / CSS (.css) / SCSS (.scss) / JSON / ARB (for Flutter).
2. You can import your Figma variables, styles and effects, directly into the plugin from the generated W3C JSON files, which is ideal for quickly duplicating, migrating, or replicating a design system without starting from scratch.
3. W3C Design Token compatibility: support for the standard format for optimal interoperability between tools (with integrated Figma metadata system).
4. Preserves all aliases and references between variables.
5. Organization by collections with clear hierarchy.
6. Automated component analysis and generates a complete, structured breakdown of its variants, properties, and visual styles format JSON / YAML (in BETA).
7. 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 options

1. Configuration Presets : Save and load export/import profiles (format, casing, W3C options, alias rules…) to switch workflows instantly.
2. Custom prefix for your exports.
3. Key Naming Convention Options.
4. Export by mode (mode selection)
5. RGBA or HEX opacity formats.
6. Integrated unit conversion (px ↔ rem, etc.) (Manages Exception by Groups)
7. Responsive management (@media / clamp()) (in BETA)
8. Token References choices (Alias / Real Values)
9. Style export management (Text / Effects)

🧰 Toolbox (Utility features)

1. Swap variables

🖥️ Intuitive interface

1. Real-time preview.
2. Dynamic token search in the preview.
3. Adaptable light/dark theme.
4. Smooth navigation between files.
5. File structure analysis (token count statistics, types, etc.).

✨ Handy features

1. Quick copy of generated code.
2. Individual or batch download.
3. 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 Lopez

bento.me/robinlopez