在最新版本的 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同步更新了 “Tokens 转 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表格/图表领域的优秀产品，帮助企业实现轻松构建高性能的表格及图表。