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-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 creating and exporting a custom AG Grid theme using Figma variables. Once you've exported your custom AG Grid theme .json from Figma you can use the included Node.js project ag-grid-figma-variables-to-css/
to create a custom theme to try out with AG Grid in browser.
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.