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 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

Features

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

Getting Started

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.

Local Variables to CSS

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.

Token Studio

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.

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.