Refactoring a design system for the masses
Project
This project involved a white-label design system that had been worked on by multiple designers over an extended period, resulting in significant technical complexity and inconsistencies. I collaborated with Samantha Gordashko, who served as the design token architect and handled the strategic planning that would guide the project's success. My role focused on the systematic implementation and technical execution—the foundational work that transformed the strategic vision into a functional system. The refactored white-label design system now supports over one million users.
The Challenges
The primary challenges included
Understanding how this white-label system needed to function across diverse industries
Ensuring it could reliably support over a million users
Building in the scalability required for continued user base expansion
System Analysis and Refactoring
I began by running the Tokens Studio plugin to analyze the existing system, which revealed over 85,000 nodes. This excessive complexity was affecting both token load times and overall Figma file performance. To address this, we needed to systematically refactor the component variants while maintaining and improving functionality.
Each component required careful analysis to distinguish between variants that were necessary for interaction and validation states versus those that represented visual bloat.
The Technical Implementation
For example, we addressed variant bloat in the button components by creating a single button with nested components (icons, text molecules) and a boolean enabled focus ring. Utilizing tokens for color and dimensions, the overall system now was significantly easier to manage and implement as it allowed for rapid iterations to button sizes, padding, and other constraints. Once tested and approved, this approach was converted into a process applied across all other large component sets.
By improving component hierarchy we not only reduced the component bloat it also help with the refactoring process. It reduced the system from 85,000 nodes to 46,000 nodes, resulting in faster file loading and a 20% reduction in total components. Beyond complexity reduction, we focused on creating a foundation for future growth by establishing CI/CD pipeline connections between Figma and GitHub. This automation ensured that token updates in one system would automatically sync to the other, eliminating the manual errors that had previously caused design-development inconsistencies.
The file optimization work required restructuring the entire Figma file hierarchy, cleaning up legacy connections, and implementing proper component nesting. These systematic improvements resulted in a library that loaded 80% faster and could publish updates reliably.
The completed refactoring achieved:
47% reduction in token nodes (85,000 to 46,000)
50% reduction in maintenance overhead
Rapid brand setup capabilities
Seamless design-to-development handoff
Project Impact
The improved system enabled designers to focus on solving user problems rather than wrestling with tool limitations, while developers could implement designs without requiring lengthy clarification sessions. The strategic design token architecture developed by the Lead provided the framework, but the meticulous implementation work was essential to transform that vision into a functional reality. Each automated workflow, optimized component, and streamlined file structure contributed to the system's overall success.
The system wasn't fully completed so we indexed the missing components that are required to make this a true white-label design system. This included a calendar, data tables, improved navigation, improve steps system. We utilized existing UI components from existing UI Kits, made adjustments to fit the white-label, and applied our design tokens. For the tables I had to completely rebuilt them to make the component responsive for desktop and tablet versions.
A table with nested component dependencies
When we first looked at the table component, it seemed straightforward enough—just needed to make it responsive for desktop and tablet. But as soon as I started digging in, I realized we had a much bigger problem on our hands. Nested components from across the entire white-label system were all tangled up in this one piece, and touching it meant potentially breaking dozens of other components.
Instead of risking a domino effect of broken components, we felt that pushing the table rebuild to the very end was a smarter choice. I knew that if we tackled it too early, we'd be constantly fixing deprecated tokens and broken connections as we updated other parts of the system. By the time we finally got to it, I had a complete picture of how everything connected. I tore down the entire table structure and rebuilt it piece by piece, carefully mapping out every dependency and making sure the new responsive architecture could flex between breakpoints.
What started as a "simple" responsive fix became the cornerstone that held our entire white-label system together. The new table component was bulletproof, and because we waited, we avoided weeks of technical debt cleanup.
Reflections on Partnership and Process
This project taught me that implementation specialists play a crucial role that often goes unrecognized. While strategic vision gets the attention, the careful, systematic work of building, testing, and optimizing systems is what makes that vision accessible to real teams solving real problems.
The partnership model worked because we both understood our roles and respected what the other brought to the project. My collaborator could focus on architecture knowing that someone was handling the execution details. I could dive deep into technical implementation knowing that strategic decisions were being handled at the appropriate level.
Looking back, the "grunt work" was really the foundation work. Without someone willing to rebuild 85,000 nodes, clean up ghost variables, create automated workflows, and systematically test every component, even the most brilliant design token architecture would have remained just a good idea.
The system we built now serves over a million end users through multiple brands, and teams can spin up new implementations in days instead of weeks. That transformation didn't happen because of magic—it happened because someone was willing to do the detailed, methodical work that turns vision into reality.