CRM
Design System 2.0: Evolving a UX Library into a Scalable Design System
COLLABORATORS & PROJECT PEERS: Product Management, Engineering, UX Team Leads
& Executive Stakeholders
Company
SugarCRM
Role
Design System Architect
Collaborators
UX Team, Engineering
Timeline
3 months for initial implementation, plus routine maintenance
Project Description
Timeline
From initial explorations to the final library, the process took approximately three months while balancing other projects.
Background
I developed and maintained the original component library about 4 years ago, but with the recent overhaul of the product line and the introduction of new styles and elements, I believed it was the perfect opportunity to migrate a library that really only served the UX team, into a comprehensive design system that helped bridge the gap between UX and Engineering. This also was allowed me to learn more and leverage the latest Figma updates to variables and design tokens.
Next Steps:
Alignment with Engineering
Figma’s variable offering is shaping the future of design and engineering workflows by enabling greater efficiency and flexibility. My next steps will involve collaborating closely with engineers to ensure seamless alignment with the codebase. This will help streamline workflows, reduce redundancy, and minimize repetitive work for both UX and Engineering teams, ultimately creating a more cohesive and scalable design system.
Helping bridge the gap between design and engineering to address larger challenges.
Maintaining consistency between live product and our component library was a challenge. By building a shared design system with engineering, we aligned components with the codebase, making designs clearer and development smoother. This freed us to focus on bigger user problems and made the design process more efficient, reducing repetitive work and unnecessary meetings.
Design token architecture
Design tokens help establish a company’s visual language while enabling seamless transformations for color modes or entirely new brands—reducing effort and cost compared to building each from scratch.
By leveraging variables, I modularized our component styles, treating them as interchangeable puzzle pieces to streamline design updates. This approach allowed me to implement style changes across all components simply by adjusting values at the root level, where styles reside. As a result, variables accelerate the design process, enhance responsiveness, and create a dynamic design environment that supports scalable, adaptable styling.
Sub-systems
Design tokens help establish a company’s visual language while enabling seamless transformations for color modes or entirely new brands—reducing effort and cost compared to building each from scratch.
By leveraging variables, I modularized our component styles, treating them as interchangeable puzzle pieces to streamline design updates. This approach allowed me to implement style changes across all components simply by adjusting values at the root level, where styles reside. As a result, variables accelerate the design process, enhance responsiveness, and create a dynamic design environment that supports scalable, adaptable styling.
Component architecture
I’ve explored various methods for creating components in Figma that effectively balance the requirements of aligning with code, usability for the UX team, and ease of maintenance.
By adopting an atomic design approach, I can manage sizes at the fundamental level rather than creating every size for each component. This involves designing multiple sizes for atomic components that are frequently reused and nesting them within more complex components. This strategy helps reduce file sizes and simplifies templates. Whenever possible, I avoid using unpublished base components, as I’ve found they complicate troubleshooting.
Through the power of variables, a complex template, consisting of many individual "atomic" components, can be transformed to a dark mode view with the click of a button.
