Back to Plugins
Tokena Wizard

Tokena Wizard

Instantly generate a complete design system foundation: colors, typography, and spacing.

Plugin Preview

Tokena Wizard preview

About this plugin

**Stop building design systems from scratch.****Tokens Wizard** kickstarts your design process by automatically generating a comprehensive set of foundational variables, semantic themes, and professional typography styles. With just a few inputs, you get a clean, organized, and scalable design system foundation ready for use in any project.✨ **Key Features:**🎨 **Smart Colors & Semantic Themes [UPDATED]*** **Primitives:** Define your core brand colors (Primary, Secondary, Neutrals, and Semantic Feedback colors), and the plugin automatically generates a full 13-shade scale for each (from tint 25 to shade 1000).* **Semantic Variables (Light & Dark Modes):** Goes beyond primitives by generating meaning-driven variables (e.g., backgrounds, surfaces, text, borders, actions, and statuses) mapped directly to your core colors. Instantly creates a "Semantic (Themes)" collection with fully configured Light and Dark modes!🔤 **Complete Typography System & Semantic Styles [NEW]**Generates a robust set of typography variables and ready-to-use Figma Text Styles:* **Semantic Text Styles:** Automatically generates perfectly structured Figma Text Styles perfectly categorized by use case: `Title`, `Heading`, `Body`, `Label`, and `Caption`.* **Built-in Documentation:** Every text style includes a professional description guiding designers on exactly when to use it, along with exact Size and Line Height specs directly in the Figma properties panel.* **Smart Binding:** Automatically binds your selected font family and size variables to the generated styles, utilizing essential weights (Regular, Medium, Semi Bold, Bold) and precise line heights.📐 **Layout, Spacing & Effects*** **Spacing Scale:** Industry-standard sizing (e.g., "4 (16px)") for consistent gaps and padding.* **Border Radius & Width:** A practical scale from 0px to full rounded corners, plus a set of standardized Border Width variables.* **Opacity:** A comprehensive set of Opacity variables (0% to 100% in 5% steps) for precise control over layers and effects.🚀 **How it works:**1. Run the Tokens Wizard plugin.2. Input your brand's hex codes and select your desired font family.3. Click to generate your **Primitives** (Foundational variables).4. Click to generate your **Semantic Variables** (Auto-mapped Light & Dark themes).5. Click to generate your **Text Styles** (Fully documented semantic typography).6. Your complete design system foundation is ready to use instantly!

Plugin Details

Version4
CreatedJanuary 11, 2026
Last UpdatedApril 5, 2026
Categoryvisual-assets-other
Creatormester3lwa196
Stats42 installs, 8 likes
PricingFree

Technical Details

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