AG Grid Component Library Integration

Component Library · Templating

Project Overview

Adding AG Grid into Figma componenta for the design team to use with the MUI component library.

My Contributions

I worked with the development team to help narrow down the possible grid solutions that we could use as at STERIS. We had a wide range of functionality needs that needed to be met and AG Grid fit 90% of these and ended up being the chosen solution.

I took the AG Grid Figma component that already existed and used this as a base to create the elements that we would use as a design team.

I ensured that all colours, variables and current AG Grid componets were replaced with ones from our design system while still keeping all the original functionality. This was completed and tested before use in projects.

The AG Grid component was created and ready for use by the design team. The main feedback that was received was that there are multiple standard varieties, and external grid filters used in our current software, and it would be good to create these as templates that we could lift and place into projects to help with efficiency.

I began the process of auditing our current software to find out what these common variations were. I used FigJam to collate screenshots of all grids used in the software and grouped them into areas. This helped me realise that there were 11 variations that needed to be created.

The Grid System

UX/UI Design

These 11 elements were created and then used by the design team in future projects and the developement team to help develop outside filters that were needed to interact with the grid.

The grid was then taken as a component from Figma and added into Storybook by the development team. It was sucessfully implemented into the design system and is now used in many projects across the STERIS sterile processing stoftware systems.