Tokener

About this plugin

A complete design token workflow solution — extract, visualize, export, and manage your Figma styles and variables as production-ready code.Extract your design system with multi-mode theming support, export as CSS, SCSS, JSON, JavaScript, or framework presets, or generate a ready-to-publish npm package. Built at Hyperzod (a Quick Commerce food and grocery app delivery builder) to solve real workflow friction at scale.✨ Features:EXTRACT & VISUALIZE• Generate visual documentation on canvas with organized sections• Support for variables (colors, spacing, radius, strings, booleans)• Text styles with font details and hierarchical grouping• Shadow/effect style preview cards• Color styles with hex values and gradients• Multi-mode theming (Light/Dark, Brand A/B, Client variants, etc.)EXPORT AS CODE• CSS Variables with dynamic mode selectors (data-theme attribute)• SCSS variables and maps with auto-generated theme mixins• JavaScript ES module exports (const per collection)• Structured JSON exports (flat or nested by mode)• Tailwind CSS config with CSS variable references• Ready-to-publish npm packages (tokens.json + variables.css + tailwind.config.js)• Collision detection warns before export• Auto-detects and excludes primitive collectionsCREATE & MANAGE• Create new text/color/effect styles from selections• Detach styles and variables from layers (fills, strokes, text, effects)• Filter collections and modes for custom exports• Mode validation for consistent themingSMART RENAME• AI-powered variable renaming with bulk apply• Rename suggestions via Gemini API (bring your own key)• One-click revert within 1 hour of applying renames• Undo-safe — each rename creates a Figma undo checkpointSMART FEATURES• Primitive collection detection (auto-excludes base tokens)• CSS variable collision warnings• Multi-mode support with arbitrary names (not just light/dark)• Selection-based UI updates• Remembers your last active tabPerfect for design system teams shipping tokens to production.