AI和Figma终于打通了！教你让效果图变成可编辑设计稿！

一、全文速览图

大家好，我是风筝KK，最近我一直在研究，AI 到底能不能真正进入设计师的工作流。不是帮我们生成几张参考图，不是生成一张看起来还不错的效果图，而是继续往下走——把效果图拆解成可用的设计素材，再进入 Figma，完成一张接近交付状态的页面。

这个周末，我终于把这条链路跑通了：

AI绘制效果图 → AI 拆分视觉元素 → Figma MCP 自动还原页面。

看到最终结果的时候，我真的特别兴奋。

因为这意味着，AI 和 Figma 之间最难跨过去的那一步，正在被解决。

二、以前AI很难真正进入设计流程

之前我也尝试过连接 Figma MCP。

页面结构、基础文字、普通按钮，这些内容 AI 已经可以在 Figma 里绘制出来。但是，一旦效果图中出现比较复杂的插图、特殊字体或者精细的视觉效果，还原度就会明显下降。

问题出在哪里？

因为效果图是一张完整的图片，AI 可以理解这张图大概长什么样，却很难准确判断：

1. 哪些内容应该在 Figma 中重新绘制；
2. 哪些插图应该保留为图片；
3. 哪些文字需要编辑；
4. 哪些特殊字体更适合直接提取；
5. 阴影、透明度和装饰元素应该如何还原。

所以，以前即使连接了 Figma MCP，复杂页面依然需要设计师花很多时间重新调整。

三、我没有让 AI 直接临摹，而是先让它拆图

为了将AI到figma的最后一公里打通，让AI将设计稿分层，快速获得素材并使用，我想了很多办法，比如：

1. 让Qclaw批量抠图：

步骤是让AI将素材分层，另存到本地文件夹，将文件夹路径给Qclaw，对他说将该文件夹的图批量抠出，就可以使用了，开始感觉挺好的，但是每次效果调整，我都要另存一遍图，觉得很麻烦。

2. 让Mastergo抠图：

步骤是让AI将素材分层，复制分层素材，粘贴进Mastergo中，让其抠图，然后复制进Figma中，这个方案我觉得非常不错，Mastergo的抠图功能很强大，就算AI分层产生的透明棋盘格，他也能轻松的抠掉。但是也没有解决最后一公里的问题，还是需要人工去操作。

3. 尝试使用Coze工作流：

但是在制作过程中就遇到了卡点，它连使用不给我，直接让我去升级。

4. 再次尝试用Figma MCP

在最后绝望的时候，我突然想到如果让AI也先分层，然后让Figma MCP绘制，会不会就可以了呢？

于是我怀着试一试的心态，让AI进行分层。

这一步的关键，不是让 AI 把所有元素全部拆散，而是由我来告诉它：

哪些内容需要单独控制，哪些内容可以作为一个完整的视觉素材保留。

很快，AI 就按照要求把页面中的视觉元素拆分好了。

背景、标题、箭头、插图、按钮等内容，都变成了可以继续使用的独立素材。

到这里，效果图已经不再只是一张“只能看”的图片，而是变成了一套可以进入设计流程的视觉资产。

四、AI和Figma MCP终于打通了

真正让我惊喜的，是它处理了我没有交代的细节。

分层完成之后，我把原始效果图和拆分出来的素材一起交给 AI，并告诉它如何绘制。

然后，我把 Figma 的绘制链接发给了它，AI 开始在 Figma 中搭建页面。

原本我以为，它最多只是把我拆好的 PNG 素材按照位置摆放进去。但实际结果比我预想的更进一步。

有些文字我没有要求单独拆分，AI 却主动识别并重新生成了对应的文字元素。

更让我意外的是，效果图里用到了一款我电脑上没有安装的字体。对于这种特殊字体，它没有强行换成相似字体，而是把原来的文字视觉效果保留下来了。

页面中的投影，它使用 Figma 的阴影效果进行了还原；不需要再次编辑的按钮，则直接使用拆分后的素材；可以重新绘制的文字和图标，又尽量转化成了独立元素。

也就是说，它没有机械地执行“全部使用图片”或者“全部重新绘制”。

它开始根据不同元素的特点，自己选择还原方式：

1. 普通文字，尽量重新生成；
2. 特殊字体，保留原有视觉效果；
3. 复杂插图，使用透明 PNG；
4. 阴影和基础样式，使用 Figma 原生属性；
5. 状态栏，按照 iOS 界面重新绘制；
6. 完成后，再对照原效果图继续调整。

这一点，才是整个实验中最让我兴奋的地方。

五、AI 和 Figma 打通，真正改变的是什么？

表面上看，这只是把一张启动页效果图还原到了 Figma。

但它背后的意义远不止“少画一张页面”。

过去，设计师使用 AI 出图之后，往往还要面对一个非常耗时的问题：

效果图很好看，但怎么把它变成能继续修改、协作和交付的设计稿？

如果只能得到一张扁平图片，那么设计师依然需要手动拆解页面、寻找字体、处理素材、重建图层、调整间距和补充组件。

AI 负责灵感，设计师负责把灵感重新做一遍，这中间存在一条很长的断层，而现在，这条断层正在缩短。

新的工作流可能会变成：

1. 设计师先明确创意方向；
2. 使用AI 快速完成效果图；
3. 告诉 AI 哪些元素需要分层；
4. AI 输出透明背景的高清素材；
5. Figma MCP 根据效果图和素材搭建页面；
6. 设计师检查细节
7. 优化规范，在让Figma MCP 对接Codex、Cursor、Claude等开发工具交付页面。

AI 不再只停留在“生成图片”这一步，而是开始参与从概念到设计稿的完整过程。

六、设计师最重要的能力是什么？

这次实验也让我意识到：

AI 的能力越强，设计师的判断反而越重要。

因为 AI 并不知道你想要什么效果，哪些元素需要切图，它更不知道一个页面后续要不要做动效、适配不同尺寸，或者进入组件化设计系统。

这些仍然需要设计师来决定。

设计师需要判断：

1. 哪些文字必须可编辑；
2. 哪些插图适合使用 PNG；
3. 哪些样式应该在 Figma 中重新建立；
4. 哪些元素未来可能需要适配和复用；
5. 页面还原到什么程度，才适合继续开发与交付。

所以，这套工作流的核心并不是“让 AI 自动画完所有页面”。

而是设计师先完成视觉决策，再把重复、耗时的执行工作交给 AI。

AI 负责提高还原效率，设计师负责定义标准和判断结果。

七、这套方法目前也不是万能的

虽然这次的结果让我很惊喜，但它还不能完全替代设计师的最终检查。

例如：

1. 字体细节可能与原图存在差异；
2. 图片素材放大后可能出现清晰度问题；
3. 自动识别的间距未必符合设计规范；
4. 复杂组件不一定具备完整的可编辑性；
5. 页面适配、组件状态和交互逻辑仍需人工补充。

因此，更准确地说，AI 现在非常适合完成一张页面的“高还原初稿”。

它可以帮设计师跳过大量重复搭建工作，但最终的规范、细节和交付质量，仍然需要设计师把关。

八、设计师不用熬夜，不是因为 AI 替你设计

以前，设计师熬夜，很多时候并不是因为没有创意，而是因为创意确定之后，还有大量机械工作要完成，比如：

抠图、拆图、搭图层、调阴影、对位置、改间距，再把一张效果图慢慢还原成设计稿。

现在，AI 正在接手其中一部分重复劳动，设计师真正需要保留的，是审美、判断、信息组织、交互逻辑，以及对最终结果负责的能力。

所以，“AI 和 Figma 终于打通了”对我来说，并不意味着设计师不重要了。

恰恰相反，它意味着设计师终于可以把更多时间放在真正需要思考的事情上，而不是把一整个晚上都用来重复搭图层。

AI 不是替设计师完成设计，而是在帮设计师缩短从想法到成品之间的距离。

好了，今天就和大家先分享到这里，下一篇和大家分享AI和Figma MCP 在复杂界面中的应用效果怎么样。

你觉得AI应用到UI设计工作流中对设计师是威胁更大，还是机遇更大呢？一起来聊聊～

欢迎关注作者的微信公众号：「海盐社」