Our Figma design system lets designers prototype and customise AG Grid applications.
The AG Grid design system replicates the Quartz AG Grid theme within Figma. This default theme can be extended with Figma variables to match any existing visual design or create entirely new AG Grid themes.
The design system is built to be consistent with the JavaScript library, easing designer-to-developer handoff.
Getting Started Copy Link
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.
Video Introduction & Figma Documentation Copy Link
The Figma file contains its own comprehensive documentation: getting-started guides, premade grid templates, and detail on how each grid component works.
Watch our short introduction video to the design system on Youtube. You'll learn how to get started with the design system, where to find complete grid templates, and how to build your own grids from scratch. After you've absorbed the basics we also have a playlist of in-depth videos diving deeper into working with the AG Grid design system.
Customising the Design System Copy Link
The AG Grid design system utilises Figma's native variables feature for all of its customisable attributes. The majority of the Theme parameters used by the Quartz theme are referenced within Figma and can be extended to your own theme.
You can find more information about how to create and manage themes within the Figma file under the Create your own theme page in the Figma file.
Generating AG Grid Themes From Figma Variables Copy Link
If you have created your own theme in Figma using the variables feature, you can export those variables as a .json file and transform that content to create an AG Grid theme. An example theme transformation project and full instructions are included in our design systems GitHub repo.
To export your Figma Variables as JSON...
- Open the local variables panel within the AG Grid Figma Design System file.
- Select the "AG Theme" collection.
- Right-click on the header of the "mode" you wish to export.
- Click "Export mode" and save the tokens
.jsonfile to your computer.
Support Copy Link
AG Grid Enterprise customers can request support or suggest features and improvements via Zendesk. Community users can file bug reports via our design system GitHub repo issues.