case study

Redesigning AG Grid with Design System Integration

Context

AG Grid is a powerful data grid component widely used by developers, but it lacked visual cohesion and intuitive user experience. My task was to transform its native interface to feel more like our component - modern, clean, and user-friendly - while fully integrating it with our design system.

Challenge

How do you turn a developer-centric, rigid component into a visually consistent, intuitive, and design system-driven experience, without disrupting development workflows?

Role

Lead UX & Design System Designer

Self-initiated project bridging design and development
Close collaboration with frontend engineers

Process

In-depth analysis of AG Grid’s API, visual limitations, and defaults.
Benchmarking our design language to define aesthetic and usability gaps.
System architecture design to apply our design language (tokens, spacing, typography, color) into AG Grid without touching its core.
Token implementation in both Figma and codebase using CSS variables and documentation.
Cross-product testing to ensure consistency and developer adoption.

Solution

I developed a token-driven approach that allowed easy customisation of AG Grid’s look and feel via design tokens-no hardcoded styles, just scalable, maintainable UI layers. I delivered example components using tokens and documented the setup for effortless developer handoff.

Outcome & Impact

AG Grid was fully integrated into our design system without compromising functionality.

Visual consistency across all components, eliminating the “foreign element” feel.

Faster development cycles with reduced styling errors.

Increased developer trust and adoption of the design system.

Key Learnings

Bridging system thinking with technical constraints of third-party tools.

Designing scalable solutions that serve both design and development.

The power of consistency and adaptability in enterprise-grade UI.