Simplifying Token Setup: Removing Routing For Efficiency

Hey everyone! 👋 Roald here, from the SLDS team. We've been doing some spring cleaning and streamlining our token setup, and I wanted to share what we've been up to. The goal? To simplify things and make our lives (and yours!) easier when working with our design tokens. Let's dive into why we're making these changes and what it means for you.

The Evolution of Token Management 🚀

For a while now, we've relied on a fairly complex routing setup within our token system. This was useful in the past, but the tools and our needs have evolved. Specifically, the introduction of multiple modes in Figma has opened up new possibilities. With Figma's enhanced capabilities, we no longer need the intricate routing we previously used. It's like upgrading from a clunky old phone with tons of wires to a sleek, wireless smartphone! 😉

The primary reason for revisiting our token routing is to simplify and improve overall efficiency. The original setup served its purpose, but it added unnecessary complexity to the process. By removing the routing, we aim to make our token system more user-friendly, easier to understand, and faster to work with. This means less time spent wrestling with the system and more time spent designing and building amazing things. We want the token system to be a helper, not a hurdle.

So, what exactly does this mean in practice? It means fewer layers of abstraction, a more direct path to the tokens you need, and a reduced chance of confusion. We're essentially trimming the fat to create a leaner, meaner token management system. This will lead to a more intuitive workflow and better overall design-system performance. It's all about making sure everything clicks, from the design stage to the final implementation. This is really about setting us up for future growth.

The New Setups: SLDS - No Routing & SLDS - Clean 🧹

We've created two new setups to test our theory and see how this change performs. These setups are designed to eliminate the routing and offer a cleaner approach to token management. Here’s a quick overview of each:

1. SLDS - No Routing (old + current tokens, no routing): This setup keeps all the existing tokens, including the original ones, but ditches the routing. This is a crucial step for compatibility, we didn't want to break anything in the process. We wanted to make sure that the tokens still work properly with the existing setup. It’s like performing a heart transplant but making sure the existing body adapts to the new organ. 🫀
2. SLDS - Clean (no routing, no old 1.0 tokens): This is the ultimate decluttering exercise. We’ve removed all the old 1.0 tokens and adopted the new system without routing. This is the cleanest version of our design system. It is a fresh start.

We're also testing an older setup.

3. SLDS - Deprecated (old 1.0 tokens, no new tokens): This setup includes only the old 1.0 tokens, with no new tokens or routing. This ensures that everything still looks great with our older systems.

These new setups can be accessed in Token Studio, and you can see the before-and-after of the changes. This will also give you an idea of the workflow that we have been using over the years. We can compare them and see if the new systems are truly better. We want to be sure that this is a win for everyone. 💪

Testing and Validation: Making Sure Everything Works ✅

Of course, we're not just flipping a switch and hoping for the best. We're putting these new setups through rigorous testing to make sure everything works as expected. I've made sure to create duplicates of our setup to prevent any disruption in our current workflow. The key thing is to ensure that the removal of routing doesn't break anything on the front-end side. So, we'll be carefully examining the impact on all of our components and designs.

We will be running extensive tests to guarantee that all of our existing components work without a hitch. This includes verifying that all tokens are correctly applied, that the designs render as intended, and that there are no unexpected side effects. We are not going to leave any stone unturned. We want to be absolutely certain that this transition is seamless and improves the overall quality of our system.

The testing phase is essential. It's where we identify any potential issues or adjustments needed. Think of it as a quality check before we launch. It's an opportunity to learn, fine-tune, and ultimately deliver a better design system. This process ensures the changes will be beneficial to us all.

How This Benefits You 🤝

So, why should you care? Because these changes are designed to make your life easier and your workflow more efficient. Here’s how you can expect to benefit:

• Faster Access: No more navigating complex routing structures. You'll get to the tokens you need quickly.
• Simplified Workflow: Reduced complexity means fewer steps, less confusion, and less time wasted.
• Improved Clarity: A cleaner, more intuitive system makes it easier to understand and use our tokens.
• Future-Proofing: A streamlined system sets us up for future growth and flexibility. As our design system evolves, the transition will be seamless.

We want to create a system that fosters creativity and efficiency, so you can concentrate on producing outstanding designs and experiences. We're always working to improve our design system, and these changes are another step in the right direction. It's about empowering you with the best tools possible.

What's Next? 🗓️

We're still in the testing and validation phase. We will monitor the new setups very carefully. After we are confident that the changes are working correctly, we will roll them out gradually. We will be sure to communicate any significant changes or updates to you. This is also your chance to get involved.

We'll keep you updated on our progress and any changes that might affect your work. Feel free to reach out with questions, suggestions, or any feedback. Your input is extremely valuable as we move forward.

Thanks for your patience, support, and enthusiasm for design. We're excited about the future of our token system and how it can help us all create better products. We are doing this for you. Your feedback and contributions make the design system truly great.

Stay tuned for more updates! 👋

For more information on design tokens and how to manage them effectively, check out this great resource:

• Figma's official documentation on design tokens: Figma Design Tokens