leading strategy and design
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.
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 stakeholders
Close collaboration with frontend engineers
Story
Everything started with an idea to standardize and simplify the grids and tables in our products in 2023. I did research and studies on how grids are used in our products. These findings helped me identify key features, design patterns, and the main differences. I did the analysis and tested how we can customize AG-Grid as a 3rd party library. I came up with the idea to use design tokens and restyle only the main styles needed to match our design language. I also came up with the idea on how to do the same in code using css classes, my colleague Rock helped with technical spikes. This solution works well in code and also in our Figma kit. I presented all these findings and proposals to the management, and later to our adopters. My work continues that I help with adoptions, and answering questions about grids/tables.
Research on how grids are used in our products.
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.
Support with the 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 UI.