Token Naming + AI AutoVariants
AI-powered design token generator with smart component variants and automatic Figma Variable binding
Plugin 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
| Version | 10 |
|---|---|
| Created | January 8, 2026 |
| Last Updated | February 25, 2026 |
| Category | design-tools-other |
| Creator | Harry Chuang |
| Stats | 19 installs, 12 likes |
| Pricing | Free |
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
More Like This
Discover other plugins in the design-tools-other category.