top of page

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.

dashboard.png

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.

design_system.png

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.

tokens.png

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.

subsystems.png

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.

componentArchitecture.png

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.

light_to_dark.gif
bottom of page