Invoke magic to create Design Tokens

‍What if the process of creating design tokens could be as intuitive and enchanting as casting a spell?

In the vast universe of digital product design, few areas have gained as much traction as Design Systems, which are, in essence, living structures that allow teams to design and develop products in a coherent, efficient and scalable way. And as if it were an ancestral enchantment, at the heart of every good Design System we can find the design tokens: small invisible spells that define the visual foundations of a product. Colors, fonts, spacing, sizes, opacities... Each token acts as an essential ingredient to help build solid, consistent and scalable digital experiences.

But, like any good magical story, mastering these incantations is not always easy. Creating design tokens from scratch and applying them correctly can become a technical and strategic challenge for many teams, often feeling like they are walking into a labyrinth with a scary dragon that they are unable to beat... Until magic steps in to help them find other paths to adventure. 

Here is where the vision of Fulvia Buonanno, our Design Systems Lead at Fail Fast, comes to life. Inspired by the creativity that drives everything we do in the studio, she has developed a solution that combines the essence of an artificially created custom tool with an enchanting RPG-style experience: the Design Tokens Wizards. A tool that acts as a magic wand to create foundational tokens in a fast, guided and frictionless way. Its purpose is clear: transform what sometimes takes weeks (or even months) into an agile, flexible and playful experience. Just like a well-cast conjure.

At Fail Fast we believe that creativity is the engine of real innovation, and that artificial intelligence is not a replacement, but a powerful ally that amplifies our ability to explore new creative paths. So, by using AI powered tools to conjure up another -in this case a niche tool within the Design Systems universe- we shorten the time and energy that sometimes we have to spend on what really matters: imagining, designing and building solutions as magical as this one.

Because when creativity meets technology, projects not only move faster... they evolve, connect and leave footprints. Along the way, they make the whole process feel like a game full of discovery. That’s exactly what the experience of using Design Tokens Wizards feels like: a crafted adventure.

‍Design Tokens: The Technical Heart of Design Systems

Now,  let's go a bit deeper: what exactly are design tokens?

We could define them as small pieces of information that contain key values such as colors, fonts, spacing, sizes, opacities or shadows. They are, without a doubt, the magic bases on which the identity and visual coherence of a digital product is built.

These tokens allow designers, developers and even, depending on the scope of the Design Systems, other areas such as marketing or business, to speak the same language. Thanks to them, visual consistency is maintained, errors are reduced and the scalability of any project, large or small, is facilitated. ✨📐

For example:

Instead of each designer using ‘#6200EE’ as the primary colour or naming it differently in each component (purple, purple, main-colour...), a design token defines it as such:

"color.brand.primary": "#6200EE"

This value is reused in all buttons, titles or backgrounds, both in design and development, ensuring visual and technical consistency.

Without this clear and strategic definition of tokens, a digital product can lose its charm and fall into visual and technical chaos. It could be filled with monsters such as inconsistencies, bugs and a fragmented user experience. In contrast, when tokens are well defined from the core of the product, they act as a solid guide to build components, flows and experiences with more stability, coherence and evolutionary capacity.

‍Design Tokens Wizards: The Perfect Spell to Kickstart Your Design System

To shape the visual foundations of a design system, Design Tokens Wizards emerges as a truly magical, visual and interactive solution. This enchanted collection of scripts has been created to support designers, beginners and experienced ones alike, in the creation of design tokens from scratch, in a structured, strategic and spellbinding way.

More than a conventional tool, it invites you to step out of the comfort zone of graphical interfaces and enter, without fear, into a more technical territory, closer to development, without the need to be experts in code. It is an experience designed to empower: the team can choose how to conjure the magic according to their maturity, their workflow or their own preferences.

🪄 With Design Tokens Wizards you can:

1. Start from the ground up, defining tokens for essential properties such as:

• Colour
• Typography
• Spacing
• Size
• Border Radius.

2. Be guided by a wizard specialised in each property, who asks key questions and offers customised recommendations, following good practices of accessibility, consistency and scalability.

3. Export the tokens in different formats and units:

JSON, CSS, SCSS — HEX, RGB, RGBA, HSL — px, rem, em

4. Integrate them with tools like Figma (variables/styles), import them via Tokens Studio or use them directly in your development environment.

✨ Whether you prefer to use the interactive interface or run the scripts from the command line, the tool adapts to the context of your team. It can also be integrated into automated flows, allowing the magic to happen even when the process needs to be more technical or continuous.

Design Tokens Wizards thus acts as an enchanted bridge between the worlds of design and code. It helps eliminate friction, encourages real collaboration between disciplines and ensures visually consistent and technically sound implementations. It is, in short, a spellbinding experience for those who want to start their system on the right and spellbinding foot. ⚡️

🐉 What if you don’t use magic?

Managing design tokens without help can quickly turn into a chaotic journey, especially when the system grows or multiple teams get involved. As we mentioned before, it’s like entering a labyrinth with a sleeping dragon at the end… and no wand or spells to face it.

Among the most common challenges are:
🫤 Confusion due to duplicated or poorly named values
🌀 Visual inconsistencies across screens or platforms
🙅‍♂️ Misalignment between designers and developers
📈 Difficulty in scaling and maintaining the system
🔧 Technical curve to implement tokens correctly
🧩⚡️ Creation of unnecessary or unused tokens
🛠️ Dependency on multiple tools to achieve a complete solution

Have questions or ideas? Reach out and let’s create something amazing together.

{{cta-yellow}}

‍

📖 Applied Magic: Benefits of Using Design Tokens Wizards

By incorporating Design Tokens Wizards into their workflow, the most adventurous designers can gain a series of concrete advantages that make the initial effort worth it from day one:

✅ Time saving and error reduction: Automating the generation and export of tokens eliminates repetitive manual tasks and minimizes human error.

✅ Better communication between design and development: Well-defined tokens act as a common language between technical and creative profiles, reducing misunderstandings and rework.

✅ Scalability and easy maintenance: An organized token system allows the Design System to grow without losing control or coherence, making its evolution easier.

✅ Multiplatform flexibility: The ability to export tokens in different formats and units allows them to be used in both design tools and web development environments, mobile apps or technical documentation.

Thus, Design Tokens Wizards make a real difference, as they not only simplify the token creation process and make it more accessible, but also bring together in a single experience what previously required several separate tools. Therefore, tokens can be imported directly as native styles into Figma, used with plugins like Tokens Studio, or tested in your components with HTML and CSS. Designers are the ones who have the power to decide how and when to invoke the magic.

✨ Creativity (and magic) will save us: How Imagination and Technology Drive Digital Product Design

One of the key elements that guided the creation of Design Tokens Wizards was the decision to build an experience with soul, inspired by the narrative universe of RPG video games. From there, Fulvia, our Design Systems Lead, created a visual imaginary full of personality: wizards with their own identities, representing diversity, each with their own essence and specific functions, turning a technical task into something magical, approachable, and enjoyable. Which brings us to highlight that storytelling remains one of the most powerful spells when working in the world of digital product design.‍

And beyond the visuals, this tool was born from a deep engine: creativity applied with purpose. A creativity that does not arise in isolation, but is cultivated through constant exchange with the design communities around us.

Design Tokens Wizards is a tool inspired by the creative and community-driven spirit that powers Fail Fast, but also intrinsically nourished by the collective energy of the magical people who are part of our communities: both the internal one at Fail Fast and the one that gathers with growing strength at the enchanted Friends of Figma Barcelona meetups.

And like any good spell, its development was not improvised. There is a massive book of spells and learnings that, for our Design Systems Lead:applying strategy, defining a product vision, planning a structure, expanding technical aspects specific to the Design Systems niche, adding version control, preparing its launch, defining marketing strategies, sharing it at events, receiving feedback, improving it… and ultimately, celebrating, sharing it. Because, in the eyes of our Design System Sorcerer, and from Fail Fast’s POV, design, besides being creative and deeply human, can also be rigorous, strategic, and collective.

This project shows that, as designers, we’re not only here to imagine solutions, we must also articulate the “why” behind our decisions. We need to create tools and design with intention, deeply connect with those who will use them, and ultimately share what we learn so others can follow the path. Because that’s how we move the craft forward together, with purpose, and a little bit of magic.

🎥 If you want to recap the journey of how this tool was created, you can watch the talk given by Fulvia Buonanno, Design Systems Lead @Fail Fast Studio, representing the Barcelona chapter in the FoF World Tour 2025: 👉 [Watch talk]

🔮 And if you want to explore the universe of the little wizards and summon the magic that will help you create design tokens effortlessly, visit 👉 www.designtokenswizards.com

May the magic of the little wizards and our spell full of creativity and strategy be with you.

‍