Back to Plugins
Token Naming + AI AutoVariants

Token Naming + AI AutoVariants

AI-powered design token generator with smart component variants and automatic Figma Variable binding

Plugin Preview

Token Naming + AI AutoVariants preview

About this plugin

Token Naming helps designers and developers create consistent, structured design tokens and Figma Variables. Build tokens manually with a structured naming builder, or let AI analyze your selected frame and automatically generate a complete 3-tier token hierarchy following Google Material Design 3 conventions.Key Features:πŸ€– AI Auto-Token β€” Select a frame, and AI analyzes its name and styles to automatically plan, create, and apply design tokens with Material Design 3 three-tier inheritance (ref β†’ sys β†’ comp).πŸŽ›οΈ AI Auto-Variants β€” AI identifies your component type (button, input, checkbox, etc.) and generates only the relevant variant axes β€” no irrelevant states. Creates a full Component Set with proper grid layout and labeled variants outside the component frame.πŸ”— Smart Variable Binding β€” AI-generated tokens are automatically bound to each variant's properties β€” fills, strokes, corner radius, padding, font size, text color, and more. Every variant state gets its own variable bindings.🧠 Existing Token Detection β€” AI checks your current Figma Variables before creating new ones, reusing existing tokens when possible.πŸ—οΈ Structured Token Builder β€” Compose token names by selecting from predefined categories: Prefix, Type, Role, Component, Variants, Target, and Status.⚑ One-Click Generation β€” Instantly create Figma Variables from your composed token name.πŸ“ Auto Collection Management β€” Variables are automatically organized into collections based on token type (ref, sys, comp, etc.).πŸ”„ Flexible Separator β€” Switch between / or - as your token separator.πŸ’Ύ Import/Export Config β€” Save and share your token naming configuration with your team.🎨 Multiple Variable Types β€” Support for Color, Number, String, and Boolean variables.Perfect for:Design system teams building consistent token naming with MD3 conventionsDesigners who want to auto-generate component variants and Figma Variables from existing framesTeams transitioning from manual token management to structured, AI-assisted workflowsStop naming tokens manually. Select a frame, let AI do the rest β€” or build, preview, and generate your own way.

Plugin Details

Version10
CreatedJanuary 8, 2026
Last UpdatedFebruary 25, 2026
Categorydesign-tools-other
CreatorHarry Chuang
Stats19 installs, 12 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • https://generativelanguage.googleapis.com