在最新版本的 Figma 設計系統 中，所有變量已與 AG Grid Theming API 參數 實現 1:1 映射。這意味著設計師在 Figma 中的修改能夠無縫傳遞到開發代碼，徹底消除溝通障礙。更重要的是，借助自動化導出與轉換工具，團隊可以一鍵生成生產可用的 AG Grid 自定義主題，顯著提升交付效率。

AG Grid最新版下載

1. 設計與開發的橋梁：變量全面映射 API

在主題定制過程中，設計與開發之間常常因為參數不一致而產生反復溝通。
新版 Figma 設計系統通過 變量直連 API，解決了這一痛點：

• 設計師 修改任意 Figma 變量

• 開發人員 立即獲得對應 API 參數

• 效果保持一致，避免返工與延遲

這一升級，讓 AG Grid 用戶的主題定制真正實現 設計所見即開發所得。

2. 示例更新：從 Tokens 到 AG Grid 主題

AG Grid同步更新了 “，展示如何將 Figma 中的變量導出，并自動轉化為 可直接用于生產環境的 AG Grid 主題。
通過這一流程，團隊只需在 Figma 完成設計，即可快速生成前端可用主題，大幅縮短研發周期。

3. 在 Figma 中創建自定義主題

新版設計系統中的每個顏色、間距、視覺參數都由 Figma 變量控制，并與 AG Grid 主題參數完全對應。

創建流程：

1. 打開 Figma 變量面板 → 選擇AG-Theme集合

2. 復制內置主題（Quartz 或 Alpine），并重命名為my-theme

3. 在AG-Mode集合中復制 Light/Dark 模式組并重命名

4. 修改變量值，即可快速生成個性化主題

同時，你還可以通過 Apply Variable Mode 直接預覽新主題效果。

4. 導出與轉換：從 Figma 到 AG Grid

完成主題設計后，只需通過 Design Tokens 插件將變量導出為 JSON 文件。
隨后，使用官方示例工程，基于 Style Dictionary 工具即可將 JSON 自動轉換為 AG Grid 主題對象。

示例命令：

node tokens-to-ag-grid-theme.js --tokens ./tokens/custom-tokens.json --theme my-theme --mode light

轉換完成后，系統會在/themes/目錄生成對應的 JavaScript 文件，直接可用于 AG Grid Theming API。

5. 在 AG Grid 中應用自定義主題

生成的主題對象可直接引入到 AG Grid 應用中，實現即時切換與部署。

示例代碼：

// 導入生成的主題
export const myExportedDarkTheme = {
  //...
};

// 創建新主題
const myTheme = themeQuartz.withParams(myExportedDarkTheme);

// 應用到 Grid
const gridOptions = {
  theme: myTheme,
  //...
};

6. 完整流程總結

從設計到應用，僅需四步：

1. Figma 設計 → 創建并修改主題變量

2. 導出 JSON → 插件生成標準化數據

3. 自動轉換 → 一鍵轉化為 AG Grid 主題對象

4. 立即部署 → 在應用中加載并應用新主題

?? 關于 AG Grid

------------------------------------------------------------

關于慧都科技

慧都科技是一家行業數字化解決方案公司，長期專注于軟件、油氣與制造行業。公司基于深入的業務理解與管理洞察，以系統化的業務建模驅動技術落地，幫助企業實現智能化運營與長期競爭優勢。在軟件工程領域，我們提供開發控件、研發管理、代碼開發、部署運維等軟件開發全鏈路所需的產品，提供正版授權采購、技術選型、個性化維保等服務，幫助客戶實現技術合規、降本增效與風險可控。慧都科技是AG Grid的在中國區的合作伙伴，AG Grid / AG Charts作為JavaScrip表格/圖表領域的優秀產品，幫助企業實現輕松構建高性能的表格及圖表。