Tokener

About this plugin

Here's the updated description with all missing features added and inaccuracies corrected: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• Vuetify, Material UI, and Chakra UI theme presets• 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.