最近在做一些页面分析和改版的时候，反复遇到一个很烦的问题：
很多时候页面明明已经在线上了，但如果想继续在 Figma 里改，还是得重新搭一遍。
截图虽然快，但截图不能编辑；直接对着 DevTools 一点点扒结构，也挺耗时间。
我后来就在想，这件事本身其实不应该这么麻烦。
所以这段时间我们做了一个小工具，叫 HTMLtoFigma：
它的方向很直接，就是把：
- 网页 URL
- HTML 代码
- 已经上线的页面结构
尽量更顺滑地带回 Figma ，变成可以继续编辑的设计内容，而不是停留在截图层面。
为什么想做这个东西
一个很现实的原因是：
现在 Figma 里这一类插件，很多都偏付费。
付费当然不是问题，问题是很多时候大家只是想先试一下、验证一下 workflow ，结果一上来就要付费，门槛会有点高。尤其是做：
- 页面改版
- 竞品分析
- 设计还原 / QA
- 从线上页面回到设计稿继续改
这些场景，本身就挺高频的。
所以我们想做一个更直接一点的版本：
先把“免费”这件事做出来，让大家能先用起来。
现在是什么状态
目前 Landing Page 已经先上线了：
插件本体也已经在最后整理中，很快就会发布。
所以这次先把页面放出来，一方面是想提前收集一些真实反馈，另一方面也想看看大家最关心的到底是哪类需求。
想听听大家的反馈
如果你平时也会在下面这些场景里来回折腾：
- 把网页拉回 Figma 做改版
- 拿线上页面做竞品拆解
- 做设计还原 / 开发联调
- 想把 HTML / 页面结构更快地变成设计起点
欢迎直接说说你的想法。
比如：
- 你第一反应最想拿它做什么
- 你最希望它优先支持什么能力
- 你会更常用 URL 导入，还是 HTML 导入
- 你之前用过类似工具，最不满意的点是什么
这些反馈对我们挺重要的。
很多功能优先级，其实不是我们自己拍脑袋定的，而是看真实用户到底卡在哪一步。
总之，先把 Landing Page 放出来，插件也快了。
如果你有兴趣，欢迎看看，也欢迎直接拍砖：
有需求、吐槽、建议都可以，越具体越好。
 |
1
ucaime 3 月 27 日
这个功能的重度用户，主要用于：
1. AI 快速生成的一些小 DEMO 是 html 的单文件，往往需要将这个 html code 导入到 figma 来做修改或提取素材； 2. 已经在线上的站点，偶尔需要修改示意或做局部调整，很早之前只能截图然后改位图； 3. 看到好的设计或者浏览的站点，迫切希望记录这个灵感，通过 figma 可以很好的记录和为以后重用、修改做准备； 因为此类需求被挖掘的起始差不多了，我自己甚至也 vibe coding 了一个自用的，但还是想说一些很迫切但很少人关注到的功能： 1. 局部提取，非常重要，通过浏览器插件来快速选择一个区域，只导入这一小块区域。原因是如果直接导入整个页面，一些复杂交互是有分镜的，需要交互后才会出现，例如一些右键菜单、打开的快捷 pannel 等。 2. ViewPort 设置，非常重要，很多时候导入的设计是没办法完美做到自动布局的，宽度和高度会影响未来的使用效率； 3. 自动布局兼容性，这个连官方 make 做的那个导入都不完美，flex 和 grid 布局仍然有很多地方无法自动适配宽高； 4. 图层命名，很少人关注的点，如果没处理好就是一大堆的 div ，我自己用了个小模型来自动命名； 5. 图片、icon 的导入处理，很麻烦，且各种异常太多，需要一点点的微调和排查 bug 。这里包含图片的设置方式，背景图片的处理机制，icon 、svg 转化或字体 icon 的特殊处理； 6. 自动组件化，复用区域的自动化组件生成和适配，这个我在尝试，但始终没有一个特别好的方案，目前用小模型分析做了一版自用的； 有几个也想要，但还没思路的功能： 1. 官方 make 给的积分只有每个月 4000 多了，完全不够用。我获取了他的 system prompt 用 claude code 来复现效果很好，甚至一些国产模型也不错。所以希望能有个本地服务快速和 figma 设计同步的工具来实现，这里起始没有太多难点，就是工程上要考虑便捷性； 2. 记录来源，能够和浏览器插件同步，有时候不太像重新粘贴； 3. 基于 mcp 服务来把 AI 和 figma 的互通，引入这个 html 转 figma 的能力； 我本身是个产品经理，所以工程能力一般，如果你有需要我可以提供更多的想法，把这个产品搞舒服一些。 |
|
2
ucaime 3 月 27 日
另外这个产品的付费模式，从现有的情况来看是有些畸形的，说的就是国内那家动不动加微信做推广的。订阅服务死贵也就算了，产品出来就没怎么升级过，figma 一堆新特性不跟进，完全躺平等死。
|
 |
3
wym572 3 月 27 日
这个工具只是对目前工作流的妥协。
长久来看，ai 编程的工作流是不需要 figma 这种工具的。 短期内看好 pencil ，非常实用高效。 |
 |
4
Plugcamp OP @ucaime 感谢你的回复，你提的这些建议和需求说得很准。
你后面提到的几个功能里，其实有不少我现在已经在做了，主要包括： 1. 局部提取 2. Viewport 设置 3. 图层命名 4. Auto Layout 5. 图片导入这类问题 这些我们都有专门在设计和处理。尤其像局部提取、Viewport 和图层命名，我们自己也觉得不是边角功能，而是会直接影响这个工具到底能不能真正进入日常工作流的东西。 Auto Layout 这块也是一样。理想情况当然是尽量自动适配，但现实里很多 flex 和 grid 的情况确实比较复杂，所以我们现在更偏向先把“可用性”做好，再持续优化兼容性。 你提到的样式提取、设计系统提取这类方向，我们也觉得很有价值，但大概率会放到后面的版本再继续做。现阶段还是先把最核心的导入链路打磨稳定，把基础体验做顺。 至于 Maker 、MCP 、AI 更深的那部分，我们自己也觉得有意思，长期肯定值得做。 但第一版应该不会先做到那么深，还是先把最基础、最高频的这条链路做好：网页 / HTML 进来以后，能不能尽量顺地变成一个真的可以继续用的 Figma 文件。 如果后面你还愿意继续聊，也欢迎直接站内私信我。像你这种从真实使用场景出发的反馈，非常有参考价值。感谢！ |
Select Language