Welcome to the AG Grid Figma Design System, created to help Product Designers prototype and customise AG Grid applications with ease.

This directory contains the following files:

• AG-Grid-XX-XX-XX.fig - The Figma Design System File
• AG-Grid-31-2-0-Token-Studio.json - Design tokens for Token studio users
• ag-grid-figma-variables-to-css - A sample node.js project to convert Figma Local Variables to CSS
• figma-file-archive - An archive of previous versions

The current version of the AG Grid Figma Design System supports:

• Quartz, Alpine, & Material themes in light mode & darkmode
• All core Grid components, which are a mirror image of the components in the AG Grid library
• Conversion of Figma Local Variables to CSS with the ag-grid-figma-variables-to-css sample project

To start simply download the AG-Grid-XX-XX-XX.fig file and open it in Figma. You'll find a getting started guide, documentation, and a tutorial video all within the design system file. For more information visit our design system documentation or check out our YouTube Tutorials.

For help importing files into Figma see this Figma help article.

If you are using the Local Variables feature in Figma, you may also want to experiment with exporting a custom AG Grid theme extension. You can export your Figma Local Variables as a .json file then use the included Node.js project ag-grid-figma-variables-to-css/ to create a custom theme extension.

Custom theme extensions can be used with our default Quartz theme to completely change the look of AG Grid in the browser to match your Figma designs.

If you are a Token Studio user we have also supplied all our tokens in the AG-Grid-XX-XX-XX-Token-Studio.json file.

AG Grid Enterprise customers can request support or suggest features and improvements via Zenhub. Community users can file bug reports via AG Grid Github issues.