CRM
Design System 2.0: Improving Design Handoff with Engineering through a Design System
Company
SugarCRM
Role
Design System Architect
Collaborators
UX, Engineering
Timeline
3 months for initial implementation, plus routine maintenance
COLLABORATORS & PROJECT PEERS: Product Management, Engineering, UX Team Leads
& Executive Stakeholders
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.
A common issue myself and our team faced was maintaining consistency between what was live in product vs our component library. By building a design system with the engineering team, the components we have available to design with are made more apparent, and when we mark a design as "ready for development" the architecture matches what an engineer is used to seeing in the codebase. This affords us the space, as a group, to solve bigger problems on behalf of our users. It also helps the design team be more efficient during the mockup and prototype phases of the design process. Through a reduction in repetitive work—and meetings, progress is made a reality instead of a pipe dream.
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.
