Introducing the AG Grid Figma Design System

James Swinton-Bland - Sep 14 '23 - - Dev Community

Intro

If you're a designer working with AG grid it's time to get very excited! With AG Grid version 30.1.0 we've released our new Figma Design System.

If you want to skip the preamble and dig into the design system yourself you can download it directly from our design system documentation page.

Everything you need to design with AG Grid

The new design system implements our Alpine and Alpine Dark themes in Figma. All of the core AG Grid components are fully built out and ready to use, with even more components arriving in future releases. Each component has been carefully crafted to precisely mirror what's available in the AG Grid library.

Make it your own...

And when you're ready to make AG Grid your own we've got you covered. The Alpine and Alpine Dark themes can be extended to create custom AG Grid themes that work with your brand. We even provide a sample style dictionary project so you can export your bespoke themes to json and quickly create custom AG Grid CSS themes.

To learn more about the design system and thow it can help your design workflow watch this short video on Youtube.

Get designing now

Once you're ready to get started with the Figma design system checkout our design system documentation page to download the design system and start creating with AG Grid.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .