README.md

AG Grid Design System

Overview

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-variables-to-css/ - A sample node.js project to convert Figma Local Variables to CSS
• figma-file-archive/ - An archive of previous versions
• token-studio-archive/ - An archive of Token studios json

Features

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

Getting Started

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.

Local Variables to CSS

If you have created your own theme in Figma using the variables feature, you can export those variables and use the Style Dictionary NPM package to create an AG Grid legacy CSS theme. An example Style Dictionary project and full instructions are included in the ag-grid-figma-variables-to-css/ directory.

Feature Requests / Bug Reports

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.