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:
/ag-grid-figma-local-variables-to-theme/Transform exported Figma local variables json into working AG Grid themes/archive/: Archived resources for the AG Grid Figma Design System.
The AG Grid Figma Design System supports:
- Quartz, and Alpine 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 working with the AG Grid Figma design system visit our Figma community page and click "Open in Figma". The AG Grid design system will open directly in Figma and you're ready to start designing for AG Grid applications.
We supply the AG Grid design system as a Figma community file. You will use the file by duplicating it to your Figma workspace. Whilst we regularly update the AG Grid design system, your duplicated files will not receive any updates automatically.
For more information about how Figma community files function, please review the Figma help pages on community files.
If you have created your own theme in Figma using the local variables you can export those values as json using the Design Tokens Figma plugin. You can then use this tokens json to create a real AG Grid theme.
An example Style Dictionary project and full instructions are included in the /ag-grid-figma-local-variables-to-theme/ directory.
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.