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 FileAG-Grid-31-2-0-Token-Studio.json- Design tokens for Token studio usersag-grid-figma-variables-to-css- A sample node.js project to convert Figma Local Variables to CSSfigma-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-csssample 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.