Tokena Wizard
Instantly generate a complete design system foundation: colors, typography, and spacing.
Plugin 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
| Version | 4 |
|---|---|
| Created | January 11, 2026 |
| Last Updated | April 5, 2026 |
| Category | visual-assets-other |
| Creator | mester3lwa196 |
| Stats | 42 installs, 8 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the visual-assets-other category.