Connect Design System: Figma Library Overhaul

Overview

Connect Design System is the most used design system in JP Morgan Chase & Co., spanning across Asset & Wealth Management (AWM) and Consumer & Community Banking (CCB) for internal products on the Connect platform. Despite being managed by the smallest team, Connect Design System has the biggest impact on the firm. As Design Systems Engineer & Technical Lead, I discovered that the Figma design library—the primary tool designers use to work with the design system—was fundamentally broken, preventing designers from using components effectively. My role encompassed uplifting our old UI, building out the pattern library, making designers' lives easier with instance swaps and variables (which the old design system did not have), coding all patterns, and contributing significant frontend work.

The Connect Design System Figma library was not set up properly, creating significant barriers for designers across the organization. Designers couldn't use basic components effectively—components were missing key functionality or weren't structured correctly. Instance slots weren't configured, preventing designers from creating patterns by swapping component variants. Component variables were missing or incorrectly attached, making it impossible to leverage theming and customization features. The design-to-code handoff was inconsistent and error-prone, with designers and engineers working from different versions of components.

These issues forced designers to manually recreate components or work around the system, undermining the design system's purpose and creating technical debt. Designers spent time rebuilding components that should have been available, leading to inconsistencies across products and making it difficult to maintain design quality at scale.

I completely rebuilt the Figma library with proper component architecture, ensuring all components followed best practices. I configured instance slots for all components, enabling designers to create patterns by swapping variants. I attached variables to components for consistent theming and customization. I established clear component organization and naming conventions. Finally, I created documentation and training materials to help designers adopt the new library.

Instance slots were properly configured for all components, enabling designers to swap component variants and create patterns. This was a fundamental capability that was missing, preventing designers from leveraging the design system's flexibility.

Variables were correctly attached to components, enabling designers to leverage theming and customization features. This allowed for consistent styling across components and made it easier to maintain design system updates.

I built out a comprehensive pattern library starting with card patterns, enabling designers to quickly access and use common design patterns. This makes designers' lives easier by providing ready-made patterns that can be customized using instance swaps and variables.

Form patterns were created to standardize form design across the platform, with proper validation states, error handling, and accessibility built in. Each pattern includes coded examples for developers.

The pattern library continues to grow with additional patterns covering navigation, data display, feedback, and more. Each pattern includes both Figma components and coded implementations.

The library overhaul established a foundation for a 1-to-1 match between Figma components and implemented code. This connection between design and code—which I built out in a subsequent case study—ensures that what designers create in Figma can be directly implemented by engineers, reducing handoff friction and inconsistencies.

I coded all patterns and contributed significant frontend work, creating coded examples that accompany each pattern in the design system. This helps the developer community by providing working code examples alongside design specifications, making it easier to implement designs accurately.

The comprehensive overhaul transformed how designers and developers work with Connect Design System. Satisfaction improved in our community to 86%, with 9/10 designers now loving the new system. Designers can now use components properly with instance swaps and variables (capabilities the old system didn't have), create patterns from instance slots, and have confidence that Figma components match the implemented code. The pattern library makes designers' lives easier, and developers benefit from coded examples accompanying each pattern.