The Quest

The Tale

The Magic

The Sorcerer

The Coven

Summon Magic

Magical and Efortless 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 Figma + 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? ✨

Wizards

Wizards

Spells

Spells

Summon Wizard

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.

Summon Wizard

Summon Wizard

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.

Summon Wizard

Summon Wizard

Typography Wizard

📝 Craft Beautiful, Accessible Typography

Create stunning, accessible color systems in minutes. Perfect for designers and developers who value consistency and accessibility.

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.

Summon Wizard

Summon Wizard

Typography Wizard

📝 Craft Beautiful, Accessible Typography

Create stunning, accessible color systems in minutes. Perfect for designers and developers who value consistency and accessibility.

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.

Summon Wizard

Summon Wizard

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.

Summon Wizard

Summon Wizard

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.

Summon Wizard

Summon Wizard

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.

Summon Wizard

Summon Wizard

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.

Summon Wizard

Summon Wizard

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.

Summon Wizard

Summon Wizard

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.

Summon Wizard

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.

Wizards

Wizards

Spells

Spells

Clear Spell

🧼 Keep Your Workspace Clean

Keep your project clean and organized with a single command. Start fresh whenever you need it!

Cast Spell

Clear Spell

🧼 Keep Your Workspace Clean

Keep your project clean and organized with a single command. Start fresh whenever you need it!

Cast Spell

Clear Spell

🧼 Keep Your Workspace Clean

Keep your project clean and organized with a single command. Start fresh whenever you need it!

Cast Spell

Merge Spell

🔗 Unify Your Tokens in Seconds

Transform your tokens into a unified file to use in your DS with a single command.

Cast Spell

Merge Spell

🔗 Unify Your Tokens in Seconds

Transform your tokens into a unified file to use in your DS with a single command.

Cast Spell

Merge Spell

🔗 Unify Your Tokens in Seconds

Transform your tokens into a unified file to use in your DS with a single command.

Cast Spell

The Sorcerer

Hi! I’m Fulvia Buonanno, a Design Systems Designer based in Barcelona, Spain — and the creator of Design Tokens Wizards, a magical tool inspired by RPGs, crafted to make token creation seamless, scalable, and genuinely fun.

I currently lead all things design systems as the Design System Lead at Fail Fast Studio, a digital design and innovation consultancy based in Barcelona.

🎯 I’m deeply passionate about bridging the gap between design and development, empowering teams to work more efficiently. I focus on making tools like Tokens Studio more approachable and inclusive — especially for beginners taking their first steps into the world of design tokens

☕️ 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!

Want to know more about the wizards?
✉️ designtokenswizards@gmail.com

Hi! I’m Fulvia Buonanno, a Design Systems Designer based in Barcelona, Spain — and the creator of Design Tokens Wizards, a magical tool inspired by RPGs, crafted to make token creation seamless, scalable, and genuinely fun.

I currently lead all things design systems as the Design System Lead at Fail Fast Studio, a digital design and innovation consultancy based in Barcelona.

🎯 I’m deeply passionate about bridging the gap between design and development, empowering teams to work more efficiently. I focus on making tools like Tokens Studio more approachable and inclusive — especially for beginners taking their first steps into the world of design tokens

☕️ 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!

Want to know more about the wizards?
✉️ designtokenswizards@gmail.com

Hi! I’m Fulvia Buonanno, a Design Systems Designer based in Barcelona, Spain — and the creator of Design Tokens Wizards, a magical tool inspired by RPGs, crafted to make token creation seamless, scalable, and genuinely fun.

I currently lead all things design systems as the Design System Lead at Fail Fast Studio, a digital design and innovation consultancy based in Barcelona.

🎯 I’m deeply passionate about bridging the gap between design and development, empowering teams to work more efficiently. I focus on making tools like Tokens Studio more approachable and inclusive — especially for beginners taking their first steps into the world of design tokens

☕️ 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!

Want to know more about the wizards?
✉️ designtokenswizards@gmail.com

Hi! I’m Fulvia Buonanno, a Design Systems Designer based in Barcelona, Spain — and the creator of Design Tokens Wizards, a magical tool inspired by RPGs, crafted to make token creation seamless, scalable, and genuinely fun.

I currently lead all things design systems as the Design System Lead at Fail Fast Studio, a digital design and innovation consultancy based in Barcelona.

🎯 I’m deeply passionate about bridging the gap between design and development, empowering teams to work more efficiently. I focus on making tools like Tokens Studio more approachable and inclusive — especially for beginners taking their first steps into the world of design tokens

☕️ 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!

Want to know more about the wizards?
✉️ designtokenswizards@gmail.com

The Coven

✨ This project wouldn’t have been possible without the incredible generosity and thoughtful support of the design community.
From early testing and insightful feedback to ongoing encouragement and inspiration — your contributions have truly shaped this magical journey.

Huge thanks to:
🪄 Everyone who tested the early versions of the wizards
💬 Friends who shared feedback, ideas, and kind words
🎓 Mentors and community leaders who lit the path
🤝 My colleagues and friends from the design's communities at Friends of Figma Barcelona and Fail Fast Studio for their constant support, collaboration, and inspiration

Thank you for believing in the magic. 💛

Project created with and for the community — powered by shared knowledge, open hearts, and a little bit of wizardry.

Crafted with ❤️ and a little bit of 🪄

by

2025

Crafted with ❤️ and a little bit of 🪄

by

2025