GoForum🌐 V2EX

做了个免费的 HTML / 网页转 Figma 设计的插件

Plugcamp · 2026-03-27 12:59 · 0 次点赞 · 2 条回复

最近在做一些页面分析和改版的时候,反复遇到一个很烦的问题:

很多时候页面明明已经在线上了,但如果想继续在 Figma 里改,还是得重新搭一遍。
截图虽然快,但截图不能编辑;直接对着 DevTools 一点点扒结构,也挺耗时间。

我后来就在想,这件事本身其实不应该这么麻烦。

所以这段时间我们做了一个小工具,叫 HTMLtoFigma

https://htmltofigma.com

它的方向很直接,就是把:

  • 网页 URL
  • HTML 代码
  • 已经上线的页面结构

尽量更顺滑地带回 Figma ,变成可以继续编辑的设计内容,而不是停留在截图层面。

为什么想做这个东西

一个很现实的原因是:

现在 Figma 里这一类插件,很多都偏付费。

付费当然不是问题,问题是很多时候大家只是想先试一下、验证一下 workflow ,结果一上来就要付费,门槛会有点高。尤其是做:

  • 页面改版
  • 竞品分析
  • 设计还原 / QA
  • 从线上页面回到设计稿继续改

这些场景,本身就挺高频的。

所以我们想做一个更直接一点的版本:

先把“免费”这件事做出来,让大家能先用起来。

现在是什么状态

目前 Landing Page 已经先上线了

https://htmltofigma.com

插件本体也已经在最后整理中,很快就会发布
所以这次先把页面放出来,一方面是想提前收集一些真实反馈,另一方面也想看看大家最关心的到底是哪类需求。

想听听大家的反馈

如果你平时也会在下面这些场景里来回折腾:

  • 把网页拉回 Figma 做改版
  • 拿线上页面做竞品拆解
  • 做设计还原 / 开发联调
  • 想把 HTML / 页面结构更快地变成设计起点

欢迎直接说说你的想法。

比如:

  • 你第一反应最想拿它做什么
  • 你最希望它优先支持什么能力
  • 你会更常用 URL 导入,还是 HTML 导入
  • 你之前用过类似工具,最不满意的点是什么

这些反馈对我们挺重要的。
很多功能优先级,其实不是我们自己拍脑袋定的,而是看真实用户到底卡在哪一步。

总之,先把 Landing Page 放出来,插件也快了。
如果你有兴趣,欢迎看看,也欢迎直接拍砖:

https://htmltofigma.com

有需求、吐槽、建议都可以,越具体越好。

2 条回复
ucaime · 2026-03-27 13:34
#1

这个功能的重度用户,主要用于:

  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 的能力;

我本身是个产品经理,所以工程能力一般,如果你有需要我可以提供更多的想法,把这个产品搞舒服一些。

ucaime · 2026-03-27 13:44
#2

另外这个产品的付费模式,从现有的情况来看是有些畸形的,说的就是国内那家动不动加微信做推广的。订阅服务死贵也就算了,产品出来就没怎么升级过,figma 一堆新特性不跟进,完全躺平等死。

添加回复
你还需要 登录 后发表回复

登录后可发帖和回复

登录 注册
主题信息
作者: Plugcamp
发布: 2026-03-27
点赞: 0
回复: 0