---
product: "AG Studio"
title: "Figma Design System"
description: "Mock up AG Studio dashboards and build AG Studio themes with the AG Studio Figma Design System."
framework: javascript
version: "3.0.0"
related:
    - title: "Modes & Layout"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/javascript/modes-layout/"
    - title: "Theming"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/javascript/theming/"
    - title: "Theme Builder"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/javascript/theme-builder/"
    - title: "Localisation"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/javascript/localisation/"
    - title: "State"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/javascript/state/"
    - title: "Undo & Redo"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/javascript/undo-redo/"
    - title: "Exporting"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/javascript/exporting/"
llms: "https://www.ag-grid.com/studio/archive/3.0.0/llms.txt"
---

# Figma Design System

Our Figma design system lets designers prototype and customise AG Studio dashboards.

![AG Studio Figma Design System](https://www.ag-grid.com/studio/archive/3.0.0/_astro/AG-Studio-Figma-Design-System.BStKEajJ.png)

The [AG Studio design system](https://www.figma.com/community/file/1680264822642310216/ag-studio-design-system) replicates the default AG Studio theme within Figma, in both light and dark modes. That default can be extended with Figma variables to match an existing visual design or to create an entirely new AG Studio theme.

The design system is built to be consistent with the JavaScript library, easing designer-to-developer handoff.

## Getting Started

To start working with the AG Studio Figma design system, visit our [Figma community page](https://www.figma.com/community/file/1680264822642310216/ag-studio-design-system) and click "Open in Figma". The AG Studio design system will open directly in Figma and you're ready to start designing AG Studio dashboards.

> **Note**
>
> We supply the AG Studio design system as a [Figma community file](https://www.figma.com/community/file/1680264822642310216/ag-studio-design-system). You will use the file by duplicating it to your Figma workspace. Whilst we regularly update the AG Studio 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](https://help.figma.com/hc/en-us/articles/360038510873-Duplicate-Community-files).

[AG Studio Design System (Figma)](https://www.figma.com/community/file/1680264822642310216/ag-studio-design-system)

## What's In The File

The design system covers the AG Studio interface as a set of 1:1 Figma components:

- The dashboard canvas and its widgets, including the example widgets used throughout the file.
- The Filters, Compose and Data panels.
- The default AG Studio theme in light and dark mode.

## Video Introduction & Figma Documentation

The Figma file contains its own documentation: getting-started guides, and detail on how each component works.

Watch our [short introduction video](https://youtu.be/hn2i_5-iMm4) to the design system on YouTube. Our [Figma Design System Tutorials playlist](https://www.youtube.com/playlist?list=PLsZlhayVgqNzE9G1yLLHQCRYSgDvx7Zo1) then covers individual features in more depth, for both AG Studio and AG Grid.

[Introducing the AG Studio Figma Design System](https://www.youtube.com/watch?v=hn2i_5-iMm4&list=PLsZlhayVgqNzE9G1yLLHQCRYSgDvx7Zo1)

## Customising the Design System

The AG Studio design system uses [Figma's native variables feature](https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma) for all of its customisable attributes. The [theme parameters](https://www.ag-grid.com/studio/archive/3.0.0/javascript/studio-theme/) AG Studio supports are referenced within Figma and can be extended into your own theme.

If you would rather build a theme in the browser than in Figma, the [Theme Builder](https://www.ag-grid.com/studio/archive/3.0.0/javascript/theme-builder/) does the same job against a live dashboard preview.

![The AG Studio Theme variable collection in Figma](https://www.ag-grid.com/studio/archive/3.0.0/_astro/Figma-Local-Variables.BsOO9jXR.png)

## Generating AG Studio Themes From Figma Variables

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 into an [AG Studio theme](https://www.ag-grid.com/studio/archive/3.0.0/javascript/theming/). An example transformation project and full instructions are included in our [design system GitHub repo](https://github.com/ag-grid/ag-grid-figma-design-system/).

To export your Figma variables as JSON:

- Open the local variables panel within the AG Studio Figma Design System file.
- Select the AG Studio collection.
- Right-click on the header of the "mode" you wish to export.
- Click "Export mode" and save the tokens `.json` file to your computer.

The example project turns that file into a theme object you pass to [`withParams`](https://www.ag-grid.com/studio/archive/3.0.0/javascript/theming/#theme-params):

```js
studioTheme.withParams({
    accentColor: '#2196f3',
    backgroundColor: '#1f2836',
    gridRowBorder: true,
})
```

> **Note**
>
> The AG Studio Figma collection also holds tokens for parts of AG Grid that AG Studio does not use. These have no matching AG Studio theme parameter, so the example project skips them and lists them on the console as it converts.

## Support

AG Studio customers can request support or suggest features and improvements via [Zendesk](https://ag-grid.zendesk.com/hc/en-us).

[AG Studio Design System (Figma)](https://www.figma.com/community/file/1680264822642310216/ag-studio-design-system)