打破代码恐惧！如何用AI开发一款Figma智能表格插件？

一、全文速览图

作为一个在 UX 设计领域深耕了 7 年的设计师，面对近年来 AI 的爆发，我内心也有过不少焦虑：设计师会不会重蹈工业革命时期第一批下岗工人的覆辙？

经过一段时间的思考，我想明白了：与其担心被 AI 替代，不如从现在起，就拥抱 AI。不管 AI 是否能直接深度嵌入到 UX 设计流程中，我先从自己能做到的小事儿做起，从自己的小小需求作为切入点，开始拥抱 AI。

作为 B 端设计师，工作中经常遇到各种表格页面，自己手动拉组件拼装太费时费力。于是我将 AI 的切入点定在了“Figma 智能表格生成”的插件上。

二、现有的表格插件，为何总觉得“水土不服”？

Figma 社区中确实有不少表格生成插件，但在实际业务应用中，它们往往难以与我们现有的设计工作流完美契合：

1. 与团队组件库断层。

我曾经在 Figma 社区中找过不少表格组件，但是都没法和现有的组件库组件关联起来。因此难以在实际工作中发挥太大作用。

2. 缺乏真实数据的代入感

用组件拼装的表格页面，想要有真实感，自己手写文案太费时。市面上的 AI 填充文案对表格内容的兼容性又不够

既然找不到完全顺手的工具，我决定自己动手。开发一款既能直接引用组件库组件，又能一键填充真实数据的 Figma 智能表格插件。

三、成果展示：零代码打造的一款 Figma 插件

1. 插件核心优势

经过我不断的调试与优化，这款完全由 AI 辅助开发的 Figma 智能表格插件终于成型。它的核心优势集中在两点：

① 完美接入本地组件库：

通过下方的表格组件配置，将你组件库中的组件和插件关联起来

表格组件配置截图

告别插件自带的刻板样式。只需在画布中选中你组件库里的表头和单元格组件，插件就会引用你的组件库自动拼装表格。这意味着，未来设计规范一旦更新，表格也能实现一键同步响应。

② 一键生成基于表头的真实表格项数据：

在插件中配置你的 AI 模型以后，就可以使用 AI 为表格填充基于表头的真实表格项数据。（不配置 AI 模型，也支持使用默认逻辑生成表格）

2. 插件功能演示

下方是一个动图展示插件生成表格的过程（因为 AI 功能耗时间，为了演示方便，改为了插件默认文案填充的表格生成方式）

未调用AI的生成动图

自救指南：打破“代码恐惧”，先跑起来再说

勇敢迈出第一步

在准备动手时，我发现最大的阻碍并不是具体的代码逻辑，而是“不敢开始”的心理门槛。作为设计师，我们习惯了追求完美，总觉得开发插件必须先系统学习各种知识，甚至要花大量时间去看评测挑选一款“最强”的 AI 编程工具才敢起步，这浪费了大量时间且让你更难以真正迈出第一步。

但实际体验下来，我的经验是：不要纠结工具，先跑起来再说。 无论是 国产的 Trae 还是国外的 Cursor、Claude Code、Codex、Antigravity 等工具，随便选择一款即可开始。我们的起步目标是先感受“Vibe Coding 的氛围”，感受怎么和 AI 一起打造一款产品，不用一上来就给自己太大压力，哪怕做的不好，每一步试错都是你宝贵的经验沉淀。

AI 开发经验沉淀

说到经验沉淀，用 AI 开发 Figma 插件或者其他产品，一定要沉淀错题本，把过程中遇到的困难和解决方案沉淀下来（可以让 AI 来总结），作为你的宝贵经验，在解决问题的过程中收获成长，这是让你和只会动动嘴用 AI 编程的人拉开差距的关键，你是在这个过程中有目的有沉淀地成长。

Figma 插件开发过程（简述）

碍于篇幅，后续我会单独出几篇详尽的实操教程，今天先给大家简单透个底，带大家跨过第一道门槛。

如果你使用的是 Claude Code 这类顶级的 AI 代理模型，你可以直接用自然语言告诉它“我要做一个 Figma 插件，请帮我完成前期的准备工作”，让它帮你把本地环境和框架全搭好，然后再一步步对话完善功能。

但如果你的模型能力一般，或者环境配置总报错，我强烈建议先在 Figma 里手动把插件的壳子建好，再让 AI 基于已有的框架写代码。具体步骤如下：

1）新建插件入口

创建一个本地插件文件，路径：在 Figma 客户端中（注意，必须是客户端）画布中右键 Plugins→Development→New Plugin

2）配置基础信息

填写你的插件名称，按下图所示选择类型

3）选择插件类型

如果你的插件需要 UI 界面，就选 Custom UI，点击 Save as 按钮并选择插件文件的保存位置

4）用 AI 编程工具打开 Figma 插件文件

使用任意一个 AI 编程工具打开刚才创建的 Figma 插件文件，开始你的 Vibe Coding 之旅吧。

Trae IDE 中的项目

我最初的启蒙工具用的 Trae(上图所示的 AI IDE) ，哪怕起步的工具和模型不够完美也别怕，先上车。等你觉得它跟不上你的思路了，再换更强的工具（Cursor，Claude code，Codex 等等）也不迟。这个过程中你肯定会遇到满屏红字的 Bug，别慌，后续我也会出文章，专门和大家聊聊怎么优雅地处理这些报错。

这个过程你可能会遇到很多挫折或者难以解决的 bug，不用担心，后续我会继续出教程文章和大家分享怎么解决开发中遇到的问题。

写在最后

如果大家对这款智能生成表格的插件感兴趣，欢迎 Figma 社区搜索「灵犀表格」或者「Tablesense」使用。

链接：https://www.figma.com/community/plugin/1600825598996776022

遇到任何 bug 或有好的建议，都欢迎与我沟通。

回顾这次开发之旅，我最深的感触是：与其在信息茧房里焦虑被替代，不如真正行动起来，用 AI 去解决哪怕最微小的一个工作痛点。相信我，在你用 AI 切实解决自己痛点的那一刻，你会有一种发现新大陆的豁然开朗。

在 AI 时代，我们设计师所具备的同理心和对用户体验的知识储备，恰恰是我们打造出更优秀产品的核心壁垒。

我是 Skyler 天宇，一名持续探索 AI 的 UX 设计师。未来我会继续分享 AI 时代的 UX 设计师要如何拥抱变化。如果你也对这些话题感兴趣，欢迎关注，未来的探索之路，我们结伴同行