Back to Plugins
TokenWizard

TokenWizard

Auto-Generate Figma Variable Tokens, Styles & Color Palettes with a Click

Plugin Preview

TokenWizard preview

About this plugin

TokenWizard is your all-in-one starter tool for building consistent, scalable design systems in Figma. With just one click, it generates structured design tokens as Figma variables, creates corresponding color, text, and spacing styles, and even renders a beautiful visual palette preview right on your canvas.


Whether you're building a brand system from scratch or bringing order to design chaos, TokenWizard adapts to your needs. Choose which token types to include (Color, Spacing, Typography), pick base colors from the UI, and skip the hassle of manual setup. No duplicate styles, no redundant variables — everything is smartly created or updated in-place.


Designed for UX teams, solo designers, and developers alike, TokenWizard transforms repetitive setup into a streamlined, creative experience — so you can start designing with structure in minutes, not hours.


Design Credits:

Huge thanks to Rabia Ali for the beautiful interface and banner designs featured in TokenWizard.

Plugin Details

Version2
CreatedJune 20, 2025
Last UpdatedJune 23, 2025
Categorydesign-tools-other
CreatorShoaib Khalid
Stats2 installs, 4 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none