Tokena Wizard

About this plugin

**Stop building design systems from scratch.****Tokens Wizard** kickstarts your design process by automatically generating a comprehensive set of foundational variables, expert-level semantic themes, professional typography, effect styles, and a stunning visual sticker sheet. With just a few inputs, you get a clean, organized, and highly scalable design system foundation ready for any project.✨ **Key Features:**🎨 **Smart Colors & Expert Semantic Themes [UPDATED]*** **Primitives:** Define your core brand colors (Primary, Secondary, Info, Gray, Success, Warning, Error), and the plugin automatically generates a full 13-shade scale for each (from tint 25 to shade 1000).* **Semantic Variables (Light & Dark Modes):** Goes far beyond basic primitives by generating meaning-driven variables (backgrounds, surfaces, text, borders, actions, and statuses). Now upgraded with **Expert-Level tokens**: "On-Colors" for perfect text accessibility, "Ghost Actions" for subtle buttons, and "Elevated/Sunken" surfaces to give your UI real structural depth.🔤 **Complete Typography System*** **Semantic Text Styles:** Automatically generates perfectly structured Figma Text Styles 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).🪄 **Shadows, Blurs & Glassmorphism [NEW]*** **Effect Styles Generation:** Instantly builds a robust set of native Figma Effect Styles to give your UI physical depth and modern aesthetics.* Includes a complete **Elevation scale** (Drop Shadows from xs to 2xl), **Inner Shadows** for inputs and pressed states, soft **Glows**, and **Background Blurs** (sm to xl) to easily achieve beautiful iOS-style Glassmorphism.📐 **Layout, Spacing & Radius*** **Spacing Scale:** Industry-standard sizing gaps and padding.* **Border Radius & Width:** A practical scale from 0px to full rounded corners (pill), plus standardized border thickness variables.* **Semantic Opacities:** Precise control over transparent states like `disabled`, `hover`, and `overlay`.📖 **One-Click Visual Documentation (Sticker Sheet) [NEW]*** Never document tokens manually again! With a single click, Tokens Wizard draws a **beautiful, production-ready Design System Sticker Sheet** right on your canvas.* Automatically generates fully styled, auto-layout boards showcasing your Primitive Colors, side-by-side Light/Dark Semantic Themes, Typography scale, Size tokens, Opacities, Radii, and Effect Styles—complete with live visual previews and hex codes.🚀 **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 **Primitives** (Foundational variables).4. Click to generate **Semantic Variables** (Auto-mapped Light & Dark themes).5. Click to generate **Text Styles** (Fully documented typography).6. Click to generate **Effect Styles** (Shadows & Blurs).7. Click to generate **Documentation** to instantly draw your gorgeous visual sticker sheet!8. Your complete design system foundation is ready to use instantly.