The challenge
Define a short-term solution and long-term vision to simplify and unify our theming across our design system and improve the usability of our components.
Scoping the challenge
Introducing a new token structure is no small feat in a design system, and it requires several key stakeholders to get involved, especially on the development side. To get better insight into the challenges presented and our ability to solve them, I started scoping out the challenges to gather info our stakeholders would need to help make an informed decision.
Auditing Existing Components and Identifying Theming Issues
Conducted a comprehensive audit of all components in the design system to identify elements affected by inconsistent color tokens and theming issues.
Mapped out the impact of these inconsistencies in both Figma and production environments, highlighting components that required theme-specific variations.
Documented all impacted components to collaborate with the team on the scope of changes needed and prioritize accordingly.
Analyzing the Impact of Introducing Component Tokens
Conducted in-depth discussions with stakeholders, including product designers, engineers, and content designers, to outline pain points and identify areas for improvement.
Assessed how component tokens could simplify theming by decoupling existing semantic tokens from specific components, ensuring consistency across light and dark modes.
Explored how this approach could improve cross-functional workflows by reducing ambiguity and improving predictability when experimenting with themes in Figma and production.
Finding opportunities
After scoping the challenges, I identified several opportunities to enhance both the usability and scalability of our design system. The inconsistent color tokens and lack of proper usage guidelines highlighted gaps that, when addressed, could significantly improve workflows for our designers and engineers. By introducing component tokens and improving our documentation, we had the chance to standardize theming across light and dark modes, reducing the need for separate theme-specific components.
Created a component token naming structure
It’s paramount that a token naming structure be scalable and intuitive. This approach goes a long way in enhancing clarity and maintaining consistency. In that same mindset, including common semantic cues will help bridge the gap between designers and engineers, reducing confusion and ensuring alignment during handoff. To help validate our approach, I tested established naming conventions with real use cases to ensure we found the optimal structure that met the needs of both our designers and engineers.
Add additional use cases and refine documentation
Our documentation was in the middle of a migration, which added to our designers’ confusion when it came time to apply colors. Throughout the year, we had a rebrand that added additional tokens, but didn’t have much guidance to help with their use cases. We had to refine our colors and use cases, and begin establishing a single source of truth. This effort heavily involved our content designers, who began assisting with documentation around our content guidelines and how they pertain to specific components. This allowed us to bring our documentation together, and begin pursuing new software to begin our overall migration into a single tool for all design system documentation, from design, to content, to code.
Make testing designs across themes easier
Our designers had mostly stopped testing their designs in Figma across themes. Our theming issues for some components made this type of testing very difficult, and this difficulty carried over into development. Any color issues wouldn’t be discovered until QA, and by then, there wasn’t enough time to test other colors or even use the proper color, in cases where the wrong one was used. To bypass this, squads would routinely override our component colors or the colors used in Figma and hardcode values on their end, which effectively detached them from our design system.
Planning and executing
After scoping and identifying opportunities, our approach became two-fold. We had immediate pain points that needed to be addressed, along with a long-term vision, or north star, of what we wanted our design system to achieve. After reviewing our options with stakeholders and leadership, we began scoping out a larger color structure effort that would see an entire revamp of our approach to color, from foundations to semantics.
In the interim, we planned our effort for solving our immediate pain points, including a component token naming structure and updating key components to solve our theming issues, and improving our documentation for our colors and latest component tokens.
30+ updated components
Four components became immediately themeable in Figma and reduced confusion for our designers. This reduction came from the usability of our components. Now, when designers swapped themes across frames, they no longer had to dig through multiple layers to find a specific component and manually swap it to dark or light mode.
5 new colors documented
Our documentation was updated to include usage guidelines for 5 additional colors, improving our designers’ understanding of when and how to use these colors. In addition to these usage guidelines, we gave designers feedback on how to better sort their colors in Figma, so instead of seeing them all as a constant palette in the grid format, the list format shows additional content, which can help show our semantic and component naming structure.
Reviewing the work
After wrapping up these short-term fixes, we landed on our next steps for our long-term vision. We’re starting to revamp our color structure from the ground up, mapping our foundational colors for light and dark mode at the lowest level, which introduces the ability to set up specific themes and brands at the semantic level, while also reducing the need for component-specific components. This will also give us the opportunity to improve our semantic structure and overall system usability for both designers and engineers.
Long-term vision
After wrapping up these short-term fixes, we landed on our next steps for our long-term vision. We’re starting to revamp our color structure from the ground up, mapping our foundational colors for light and dark mode at the lowest level, which introduces the ability to set up specific themes and brands at the semantic level, while also reducing the need for component-specific components. This will also give us the opportunity to improve our semantic structure and overall system usability for both designers and engineers.
