Effortless Design Tokens Generation for
Figma/Tokens Studio, CSS & SCSS!
A collection of scripts to effortlessly generate design tokens for seamless integration with Tokens Studio, CSS, and SCSS. Simplify token creation and management—like magic!
The Magic of Design Tokens Wizards
Are you tired of overthinking token names 🧠 or struggling to keep everything in sync 🔄? You shouldn’t have to worry anymore—because the Design Token Wizards 🧙♂️🧙♀️ have come to your aid.
With just a flick of a script ✨, your design inputs—like colors 🎨, spacing 📏, and typography 🔤—are instantly transformed into beautifully structured tokens, ready to work with Tokens Studio, CSS, and SCSS.
No mess 🚫, no manual formatting 🛠️, no second guessing 🤔.
Just effortless, consistent tokens—like magic! 🪄
The Tale Behind Design Tokens Wizards a.k.a. "Los Maguitos"
Design Tokens Wizards 🧙♂️✨ was born from a desire to simplify the often overwhelming world of design tokens 🎨🧩. As a Design Systems Designer 🛠️, I saw how many teams struggled to create and manage tokens effectively 😵💫.
This tool is my way of making that process more approachable—and even fun! 🎉
The project blends my passion for design systems ❤️ with my love for gaming aesthetics 🎮🧝. Each “wizard” 🧙♀️ and “spell” 🪄 in the toolkit is crafted to make token creation feel like a magical journey 🗺️ instead of a tedious technical task 🔧.
Among early testers and friends, the wizards have lovingly earned the nickname “los maguitos”—Spanish for “little wizards” 🥹✨.
Summon the Wizards
Streamline your design tokens process with our powerful suite of wizards! Each tool is thoughtfully designed to make building and managing your design system effortless, efficient—and just a little bit magical. 🪄
Ready to meet the little wizards who are here to help? ✨
Color Wizard
🌟 Create Stunning Color Systems in Minutes!
Create stunning, accessible color systems in minutes. Perfect for designers and developers who value consistency and accessibility.
color_wiz.js npm run color ======================================= 🪄 STARTING THE COLOR WIZARD'S MAGIC ======================================= 🦄 Casting the magic of tokens.. ❤️ Welcome to the Color Tokens Wizard script! Let this wizard guide you through creating your color tokens in just a few steps. Generate your colors, convert them, and prepare them for import or sync with Tokens Studio format.. ✨ As a delightful bonus, you'll receive magical files in SCSS and CSS to test in your implementation! [...]
Color Wizard
🌟 Create Stunning Color Systems in Minutes!
Create stunning, accessible color systems in minutes. Perfect for designers and developers who value consistency and accessibility.
Color Wizard
🌟 Create Stunning Color Systems in Minutes!
Create stunning, accessible color systems in minutes. Perfect for designers and developers who value consistency and accessibility.
color_wiz.js npm run color ======================================= 🪄 STARTING THE COLOR WIZARD'S MAGIC ======================================= 🦄 Casting the magic of tokens.. ❤️ Welcome to the Color Tokens Wizard script! Let this wizard guide you through creating your color tokens in just a few steps. Generate your colors, convert them, and prepare them for import or sync with Tokens Studio format.. ✨ As a delightful bonus, you'll receive magical files in SCSS and CSS to test in your implementation! [...]
Color Wizard
🌟 Create Stunning Color Systems in Minutes!
Create stunning, accessible color systems in minutes. Perfect for designers and developers who value consistency and accessibility.
Typography Wizard
📝 Craft Beautiful, Accessible Typography
Create typography systems that work beautifully together. Perfect for crafting accessible, scalable type systems.
typo_wiz.js npm run typo ======================================== 🪄 STARTING THE TYPOGRAPHY TOKENS WIZARD'S MAGIC ======================================== 🦄 Casting the magic of tokens... ❤️ Welcome to the Typography Tokens Wizard script! Let this wizard guide you through creating your typography tokens in just a few enchanting steps. Define your font families, sizes, weights, and more, and prepare them for import or sync with Tokens Studio format. ✨ As a delightful bonus, you'll receive magical files in SCSS and CSS to test in your implementation! [...]
Typography Wizard
📝 Craft Beautiful, Accessible Typography
Create typography systems that work beautifully together. Perfect for crafting accessible, scalable type systems.
Typography Wizard
📝 Craft Beautiful, Accessible Typography
Create typography systems that work beautifully together. Perfect for crafting accessible, scalable type systems.
typo_wiz.js npm run typo ======================================== 🪄 STARTING THE TYPOGRAPHY TOKENS WIZARD'S MAGIC ======================================== 🦄 Casting the magic of tokens... ❤️ Welcome to the Typography Tokens Wizard script! Let this wizard guide you through creating your typography tokens in just a few enchanting steps. Define your font families, sizes, weights, and more, and prepare them for import or sync with Tokens Studio format. ✨ As a delightful bonus, you'll receive magical files in SCSS and CSS to test in your implementation! [...]
Typography Wizard
📝 Craft Beautiful, Accessible Typography
Create typography systems that work beautifully together. Perfect for crafting accessible, scalable type systems.
Space Wizard
🌌 Master the Art of Spacing
Master spacing with our intuitive wizard. Create harmonious layouts that bring your designs to life.
space_wiz.js npm run space ======================================= 🪄 STARTING THE SPACE TOKENS WIZARD'S MAGIC ======================================= 🧚 Casting the magic of tokens.. ❤️ Welcome to the Space Tokens Wizard script! Let this wizard 🧙 guide you through creating your space tokens step by step.Generate your tokens and prepare them ready for using or syncing in Tokens Studio. ✨ As a delightful bonus, you'll receive magical files in SCSS and CSS to test in your implementation! [...]
Space Wizard
🌌 Master the Art of Spacing
Master spacing with our intuitive wizard. Create harmonious layouts that bring your designs to life.
Space Wizard
🌌 Master the Art of Spacing
Master spacing with our intuitive wizard. Create harmonious layouts that bring your designs to life.
space_wiz.js npm run space ======================================= 🪄 STARTING THE SPACE TOKENS WIZARD'S MAGIC ======================================= 🧚 Casting the magic of tokens.. ❤️ Welcome to the Space Tokens Wizard script! Let this wizard 🧙 guide you through creating your space tokens step by step.Generate your tokens and prepare them ready for using or syncing in Tokens Studio. ✨ As a delightful bonus, you'll receive magical files in SCSS and CSS to test in your implementation! [...]
Space Wizard
🌌 Master the Art of Spacing
Master spacing with our intuitive wizard. Create harmonious layouts that bring your designs to life.
Size Wizard
📐 Scale Your Designs with Precision
Create consistent size systems that scale beautifully across your entire design system.
size_wiz.js npm run size ======================================= 🪄 STARTING THE SIZE TOKENS WIZARD'S MAGIC ======================================= 🧚 Casting the magic of tokens.. ❤️ Welcome to the Size Tokens Wizard script! Let this wizard 🧙 guide you through creating your size tokens step by step.Generate your tokens and prepare them ready for using or syncing in Tokens Studio. ✨ As a delightful bonus, you'll receive magical files in SCSS and CSS to test in your implementation! [...]
Size Wizard
📐 Scale Your Designs with Precision
Create consistent size systems that scale beautifully across your entire design system.
Size Wizard
📐 Scale Your Designs with Precision
Create consistent size systems that scale beautifully across your entire design system.
size_wiz.js npm run size ======================================= 🪄 STARTING THE SIZE TOKENS WIZARD'S MAGIC ======================================= 🧚 Casting the magic of tokens.. ❤️ Welcome to the Size Tokens Wizard script! Let this wizard 🧙 guide you through creating your size tokens step by step.Generate your tokens and prepare them ready for using or syncing in Tokens Studio. ✨ As a delightful bonus, you'll receive magical files in SCSS and CSS to test in your implementation! [...]
Size Wizard
📐 Scale Your Designs with Precision
Create consistent size systems that scale beautifully across your entire design system.
Border Radius Wizard
🎯 Perfect Corners, Every Time
Add the perfect finishing touches to your components with precision and consistency.
radii_wiz.js npm run radii ======================================= 🪄 STARTING THE BORDER RADIUS TOKENS WIZARD'S MAGIC ======================================= 🧚 Casting the magic of tokens.. ❤️ Welcome to the Border Radius Tokens Wizard script! Let this wizard 🧙 guide you through creating your border radius tokens step by step.Generate your tokens and prepare them for using or syncing in Tokens Studio. ✨ As a delightful bonus, you'll receive magical files in SCSS and CSS to test in your implementation [...]
Border Radius Wizard
🎯 Perfect Corners, Every Time
Create consistent size systems that scale beautifully across your entire design system.
Border Radius Wizard
🎯 Perfect Corners, Every Time
Add the perfect finishing touches to your components with precision and consistency.
radii_wiz.js npm run radii ======================================= 🪄 STARTING THE BORDER RADIUS TOKENS WIZARD'S MAGIC ======================================= 🧚 Casting the magic of tokens.. ❤️ Welcome to the Border Radius Tokens Wizard script! Let this wizard 🧙 guide you through creating your border radius tokens step by step.Generate your tokens and prepare them for using or syncing in Tokens Studio. ✨ As a delightful bonus, you'll receive magical files in SCSS and CSS to test in your implementation [...]
Border Radius Wizard
🎯 Perfect Corners, Every Time
Create consistent size systems that scale beautifully across your entire design system.
Cast the Spells
Keep your tokens in check and transform your workspace with these powerful spells! 🪄
Each one is crafted to help you organize, maintain, and evolve your design tokens with ease—and a touch of magic.
Clear Spell
🧼 Keep Your Workspace Clean
Keep your project clean and organized with a single command. Start fresh whenever you need it!
Clear Spell
🧼 Keep Your Workspace Clean
Keep your project clean and organized with a single command. Start fresh whenever you need it!
Clear Spell
🧼 Keep Your Workspace Clean
Keep your project clean and organized with a single command. Start fresh whenever you need it!
Clear Spell
🧼 Keep Your Workspace Clean
Keep your project clean and organized with a single command. Start fresh whenever you need it!
Merge Spell
🔗 Unify Your Tokens in Seconds
Transform your tokens into a unified file to use in your DS with a single command.
Merge Spell
🔗 Unify Your Tokens in Seconds
Transform your tokens into a unified file to use in your DS with a single command.
Merge Spell
🔗 Unify Your Tokens in Seconds
Transform your tokens into a unified file to use in your DS with a single command.
Merge Spell
🔗 Unify Your Tokens in Seconds
Transform your tokens into a unified file to use in your DS with a single command.
The Creator
Hi! I’m Fulvia Buonanno, a Design Systems Designer based in Barcelona, Spain, and the creator of Design Tokens Wizards — a tool inspired by RPGs and built to make token creation seamless and fun.
🎯 I’m passionate about bridging the gap between design and development, making tools like Tokens Studio more accessible to everyone, especially beginners.
☕️ Enjoying the project?
You can support it with a coffee!
🧙♀️ Using the wizards and have feedback?
Fill out this form and I’ll get back to you soon!
Contact me at
✉️ designtokenswizards@gmail.com
Hi! I’m Fulvia Buonanno, a Design Systems Designer based in Barcelona, Spain, and the creator of Design Tokens Wizards — a tool inspired by RPGs and built to make token creation seamless and fun.
🎯 I’m passionate about bridging the gap between design and development, making tools like Tokens Studio more accessible to everyone, especially beginners.
☕️ Enjoying the project?
You can support it with a coffee!
🧙♀️ Using the wizards and have feedback?
Fill out this form and I’ll get back to you soon!
Contact me at
✉️ designtokenswizards@gmail.com
Hi! I’m Fulvia Buonanno, a Design Systems Designer based in Barcelona, Spain, and the creator of Design Tokens Wizards — a tool inspired by RPGs and built to make token creation seamless and fun.
🎯 I’m passionate about bridging the gap between design and development, making tools like Tokens Studio more accessible to everyone, especially beginners.
☕️ Enjoying the project?
You can support it with a coffee!
🧙♀️ Using the wizards and have feedback?
Fill out this form and I’ll get back to you soon!
Contact me at
✉️ designtokenswizards@gmail.com
Hi! I’m Fulvia Buonanno, a Design Systems Designer based in Barcelona, Spain, and the creator of Design Tokens Wizards — a tool inspired by RPGs and built to make token creation seamless and fun.
🎯 I’m passionate about bridging the gap between design and development, making tools like Tokens Studio more accessible to everyone, especially beginners.
☕️ Enjoying the project?
You can support it with a coffee!
🧙♀️ Using the wizards and have feedback?
Fill out this form and I’ll get back to you soon!
Contact me at
✉️ designtokenswizards@gmail.com