Figma Charts丨Figma 图表

Figma Charts

Figma 图表

作者
Amila Sampath
类别
📈 图表
定价
免费

✏️ 介绍

Figma Charts 是一款功能很强的数据图表插件,可以直接在 Figma 和 FigJam 里创建、编辑和导出图表。它不仅自带 24+ 图表类型,还整合了 Google Charts、Highcharts、D3/Nivo、ApexCharts 这 4 大图表库,可覆盖 200+ 图表类型和 576+ 示例。它的特点是:设计出来的图表更接近开发最终会真正实现的效果,减少设计和开发之间的偏差。

🔨 功能

1. 支持 200+ 图表类型,覆盖折线图、柱状图、饼图、雷达图、热力图、桑基图、树图、甘特图、词云、地图等复杂图表 2. 集成 4 个主流图表库:Google Charts、Highcharts、D3/Nivo、ApexCharts 3. 支持在 Figma / FigJam 中直接预览和编辑图表 4. 可自定义颜色、样式、配置、图例、坐标轴等图表参数 5. 支持用自然语言生成或修改图表,可配合 Claude、ChatGPT、Gemini 使用 6. 支持从静态数据、CSV、JSON、Excel、Google Sheets、REST API、Airtable、Supabase 导入数据 7. 支持生成开发可用代码,包括 React、Vue、Angular 和 Vanilla JS 8. 支持导出 SVG、PNG、PDF、GIF、WebM、CSV、JSON 等格式 9. 支持动画时间轴,可制作图表过渡动画和导出动图 / 视频 10. 支持保存图表预设,方便在项目中重复使用 11. 支持接入 Figma Variables、颜色样式和团队色彩库,更方便和设计系统联动 12. 提供 Chart Inspector,可直接点选图表元素进行编辑 13. 提供无障碍能力,如色盲模拟和 WCAG 对比度检查 14. 免费版支持 Google Charts、部分 Highcharts、静态/CSV/JSON 数据和基础导出 15. Pro 版解锁全部 200+ 图表类型、AI 编辑、动画、更多数据连接器、代码导出和高级导出能力

适用场景

  • 仪表盘、汇报页需要折线 / 柱状 / 饼图且希望接近前端真实图表
  • FigJam 研讨会里要快速放一张可改数据的示意图表
  • 需要 Google Charts / Highcharts / D3 / ApexCharts 类效果的设计稿
  • 设计和开发要对齐图表类型与示例,减少「设计稿做不到」的返工

和替代方案怎么选

  • 对比 手动画柱子 + 假数据

    Figma Charts 覆盖 200+ 类型并贴近真实图表库,改数据比重画快。

  • 对比 只导出静态截图的图表工具

    它强调在 Figma / FigJam 内编辑与导出,方便继续排版。

中文环境注意点

  • 插件名与图表类型多为英文,中文团队可按类型中文名对照选用。
  • 复杂地图 / 桑基等类型体积较大,注意文件性能。
  • 是否付费以插件页标注为准;商用前确认图表库许可要求。

更多同场景插件见📈 图表分类。