嗨，我是范米花儿，好久不见。最近在忙一件想做好久但一直没做成的事儿：
插件功能简单介绍：
- 图表预览、导出与编辑，支持自定义数据配置
- 支持六种常见图表类型：柱形图、条形图、折线图、面积图、饼图、环形图
- 支持指标卡配置，可根据数据动态调整指标卡内容
- 支持基于 DeepSeek 的 AI 对话，通过输入自有 API Key 生成图表
- 支持通过 JSON 格式快速导入图表数据
- 集成 MCP 服务，支持与 AI 对话工具、搭配知识库检索，实现图表生成
这篇文章算是作为插件实现各阶段的记录，分享一些心路历程，从设计师的角度去讲，没有很多专业语言，也方便大家理解～
更多AI开发实战：
关注我的小伙伴可能知道，因为我平时会有大量看板相关项目，所以做了一些 Figma 图表组件，应该也有很多小伙伴使用过。
但有一个问题：即便我已经做了自动布局并且增加不同数据状态的组件，还是不可避免要根据实际业务，手动调整图表中的标签名称、柱子数量、折线点数等等。
所以其实有些小伙伴问我"怎么改组件数据？"，我也只能回答"手动调整"。同时数据的真实性也确实无法保证（有次被领导吐槽图表看起来不真实）。
当然，市面上确实有很多功能强大的图表插件，但有个问题：不够定制，生成后的样式不是我想要的或者不符合现有设计风格，所以还是得花时间再调整。
其实，前两年就有位行业前辈建议我把图表组件做成插件，但那时候完全没有开发经验又没有 AI 帮忙，只能搁置了。
直到前段时间，因为一个新项目的前期讨论，夸张的时候一天量产将近 50 个页面，都在不停地复制粘贴改图表，需求推翻之后再重来一遍，不断循环。这种大量重复且没有价值的劳动，实在令人烦躁。
所以为了解放劳动力，6 月底，我决定用 AI（Cursor+Trae）试试，做一个符合我自己设计样式的图表插件。
这就是我插件之路的开始，开始瞎鼓捣。
V1 版本界面如下：
在做插件之前，我啥也不知道，不知道做 Figma 插件要用什么技术来写？有什么规范要求？如何实现画布导出？又能在 Figma 里二次编辑？又如何按照我想要的设计样式来导出？
带着一堆疑问，我就开始了和 Cursor 的对话之旅，讲到这里：小伙伴可能会问你的 Prompt 是怎么写的？能分享一下吗？
其实，啥也没有。最开始就是纯聊天（建议大家用 Ask 模式，省钱），比如“我想要做一个图表插件，可以自定义数据，可以导出画布。” 经过多轮对话后，让它为我总结一个合适的功能架构，我再开启 Agent 模式开发。
在做插件的过程中，也有在跟小伙伴们实时分享，所以这里总结一些 Q&A，希望对大家有帮助：
Q：我也想开发自己的工具，要不要先学习代码或者阅读 Figma 官方的文档？
A：之前我发布过一个超长的 Cursor 还原界面录屏，也有很多小伙伴来问我这个问题。这里统一回复，因为我本科学的是软件工程，所以也确实不是完全零基础，但因为毕业后没再从事相关工作，其实也都“还给姥姥家了”。懂编程的话，当然会少走很多弯路（也省钱），但也不至于说不会就做不成，要有耐心，对于我个人来讲，带着问题和解决方案再去学习理论知识，会有不一样的视角。
Q：插件的界面是你自己设计好之后，再 AI 还原的吗？
A：没有，费时间，还原效果也不好，不如直接写。在前期沟通过程中，就选了开源的样式库，并且大多都是配置属性、基础组件也没什么值得设计的。但是，针对插件左侧预览区域和导出的图表样式，因为我本身有组件，所以就顺手通过 Figma MCP，复制了一份链接，做样式的还原（其实效果也不咋地，还是需要对话二次调整的，比如各种元素颜色、间距等）
Q：用了 Figma 链接进行还原，那我需要把所有的图表组件类型都做一份吗？
A：不需要，从上方的截图，其实可以看出来，图表容器有一些样式（背景透明度、有标题、图表区域背景纯白等）。针对容器，我做了一个通用的框架，而每次渲染只改图表区域的内容。图表样式也通过配置文件统一管理。
Q：插件是用什么方式实现的？
A：以下为 Cursor 官方回复+我人工备注：
1. 技术架构
前端界面：使用 React + HTML 构建用户界面
Figma 插件本身只用纯 HTML + JavaScript 方案也可以做，只是因为图表插件比较复杂，之后我还想拓展更多功能，所以才决定用 React
图表预览：集成 ECharts 库进行实时预览
其它图表库也可以，ECharts 是因为公司在用，而我也比较熟悉
Figma 集成：使用 Figma Plugin API 进行原生图形渲染
用大白话讲，就是用文本、矩形、线条这些元素，让 Figma 把图表画一遍
数据流：通过消息传递机制在 UI 和插件主逻辑间通信
这里小伙伴们可能看不懂，举个例子：
比如在餐厅点菜，我们=UI 界面，服务员=消息传递机制，厨师=插件主逻辑
我们想吃什么 → 服务员传话 → 厨师做菜 → 服务员端菜 → 吃到菜
实际流程：比如要创建一个柱形图。
第一步：在插件界面中：我们输入图表标题、数据、轴标题等（想吃什么）
第二步：UI 收集我们输入的所有数据（服务员写菜单）
第三步：发送收集到的数据给插件主逻辑（服务员传话）
第四步：主逻辑接收到数据后，开始创建图表（厨师做菜）
第五步：创建成功，返回结果（吃）
2. 核心实现原理
双重渲染机制
预览层：在 UI 界面中使用 ECharts 渲染图表，提供实时预览和交互
其中只做静态效果“图片”展示也可以的，还相对简单，但我希望在插件中可以实时预览、交互（图例筛选、显示数据浮窗、切换动画等）
导出层：使用 Figma API 创建原生图形元素，确保导出的图表是真正的 Figma 对象
3. 一致性保持机制
- 配置统一管理：所有样式配置集中在 config.js 中，颜色主题、字体设置、布局参数统一管理（可理解为 Figma 右侧面板的样式）
- 样式继承体系：建立基础样式模板，各图表类型继承基础样式，同时允许特定图表类型覆盖部分样式（可理解为 Figma 组件和变体）
- 渲染同步：ECharts 预览和 Figma 导出使用相同的配置对象，确保预览效果与最终导出完全一致
Q：导出的图表，可以二次编辑吗？
A：根据上一条提到，导出的图表是真正的 Figma 对象，所以自然可以编辑。
不过这里提一嘴：其实最开始，我想做导出后的图表容器也有完整的自动布局效果（就像我的图表组件一样），但是会有很多问题，比如元素图层没有正常嵌套或者丢失、为空等。同时也看了很多插件，都是通过组或者画框来实现的，也没做到自动布局。所以我就放弃了。这里留一个疑问，如果有答案的小伙伴请联系我～
本阶段效果演示如下：
从 0 到 1 是最难的，在能把柱形图实现出来的前提下，剩下图表类型补充其实是时间问题。
不过在丰富图表之前，我最想做的就是增加指标卡区域，因为在实际的看板设计中，经常会搭配图表突出一些重点指标，比如最大值、最小值之类的，并且这些指标可以根据图表数据动态调整，当然也支持自定义指标、显示顺序和单行数量调整。
这里遇到了一个问题：
因为增加了指标卡区域，而在样式菜单下可以自定义导出高度，那么当导出高度很小且有多行指标卡时，可能会导致图表压缩到很难阅读。
不过在实际工作中，不会出现极端情况，所以我将这部分的功能做了折中调整，在显示指标卡时，导出高度是固定变化的，每增加一行指标卡，随之增加高度。只有在不显示指标卡时，才允许自由调整。
至于图表类型 ：
这一阶段，我先只增加了其它五种常见图表类型：条形图、折线图、面积图、饼图、环形图，及其系列图表（分组、堆叠）
界面内效果如下：
本阶段效果演示如下：
到上一阶段为止，其实我最开始做插件的需求已经被满足了，可以配置数据、可以导出图表。
有了保底方案（底气），我就开始脑洞大开了（其实还是懒）。
因为插件还是要我手动配置呀，输入图表标题、指标名称、输入数据值、坐标轴名称等等。
如果大家有仔细看 V1 版界面截图，会发现我有一个预设模板的功能，这里的模板其实是我根据常见业务场景做的（比如：财务、库存、供应商等等），能为我在绘制重复图表时节省时间。但因为每家客户业务不同，其实还会进行调整，治标不治本，所以后期迭代就被我删掉了。
那么既然插件已经能渲染图表并导出了，懒人就要懒到底，能不能让 AI 帮我搞？我只输入需求，或者图表标题之类的，它来帮我填充虚拟数据。
所以又开始了和 Cursor 的聊天之路，最后决定借助 DeepSeek 实现自然语言到图表配置的转换，同时为了之后发布到 Figma 社区大家也能用，所以我增加了 API Key 配置的入口（至于为什么用 DeepSeek，而不是其他模型？因为我之前充的 10 块钱，还没用完，只用了 2 分）。
这里有个小瑕疵：官网的速度有点慢，生成大概需要等 5 秒钟，所以插件我之后会做一个“自用版”，使用公司本地的模型，节约时间。
本阶段效果演示如下：
在实现阶段 4 之后，其实我已经很满意了，足够我的日常需求。也没有计划要做这部分的功能，那么为什么做了呢？因为一次无心插柳的合作。。。
一天中午，ChatBox 的负责人从 B 站找到我，希望我为他们做一次产品宣传，当然选题需要我来想。
正好当时我在忙着调试插件，又看到他们界面中的知识库入口。灵机一动，我就在想既然已经做到通过输入需求描述来生成图表了，那能不能再往业务上游走一走？
我们从业务到图表可视化的流程大概是：
- 收到业务需求文档、各种形式的表格数据等
- 根据这些内容，给出数据指标和分析方案（一部分根据以往经验、一部分借助 ai）
- 根据方案做可视化呈现
现在已经完成了第三步，那前两步呢？
可不可以借助 ChatBox 来实现需求文档的分析和可视化建议？最后把确定结论再通过插件，生成符合我设计样式的图表，我还可以在插件里进行二次调整。同时可以借助这种方式，把以往堆积在硬盘里的需求文档，作为知识库用起来，还不用本地部署（这种方式对于设计师来讲，上手会更简单，也能更好的了解业务）。同时因为本地储存，也可以保证文件保密性。
这样一石二鸟，既可以做宣传，我的插件也可以再丰富。
当时只是有个想法，但我也不知道具体要如何实现从结论变成我插件可以理解的内容，再渲染图表。
所以，继续开始和 Cursor 的聊天之路，最后选定最简单也最稳定的方案：使用 JSON 配置。将结论按照插件中所需要的数据来输出，我手动复制 JSON 到插件中，就可以迅速生成符合样式的图表。
所以只要能够生成 JSON，任何工具都可以的。这篇文章，也真的是为了插件总结！我怕小伙伴们看到最后，以为这是篇广告文。
ChatBox 知识库与插件生成演示如下：
在用了一段时间之后，我发现 AI 功能更适合快速做前期原型。而 JSON 配置更适合准确的数据场景，之后在实际项目中会更好用。就是这样无心插柳，得到意外惊喜。
这篇文章写到这里的时候，我有一个新想法，能不能像 Talk to Figma 一样？这种方式其实最好的，不需要插件，可以直接把结论图表在 Figma 中绘制。只是有一个问题，绘制的样式不可控，如果大家用过，就知道我在说什么。
所以针对这一方案，我的插件更多是起到了控制样式的作用。为了满足这一点，就需要手动来复制实现跨软件“交流”。
在上一阶段中，已经满足了知识库检索生成图表结论和插件中的图表预览、配置及导出，但唯一的不足就是需要手动复制 JSON 到插件中，没法做到两个工具之间的“直接交流”。
所以最终选择了最直接的方式：为插件写一个 MCP 服务来实现通信（将图表配置信息通过本地桥接服务将配置发送到 Figma 插件，插件会自动读取配置并在界面上显示图表预览）
演示如下：
除了最新的 MCP 功能（因为还在本地），前五个阶段的功能，我已经发布到了 Figma 社区，但还在审核、、还在审核、、还在审核、、！
这里想问问，有没有发布过的小伙伴？审核会按照最近更新时间重新排队吗。如果是这样，那又要排 5-10 个工作日。
再见啦～
复制本文链接 文章为作者独立观点不代表优设网立场，未经允许不得转载。
发评论！每天赢奖品
点击 登录 后，在评论区留言，系统会随机派送奖品
2012年成立至今，是国内备受欢迎的设计师平台，提供奖品赞助 联系我们
AI辅助海报设计101例
已累计诞生 741 位幸运星
发表评论 为下方 8 条评论点赞，解锁好运彩蛋
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓