今天要给大家分享的是我一直在用的，特别特别强烈推荐的Figma插——html to design。

他这个插件非常实用👍，不仅支持网页直接转可编辑的设计稿，还支持各大生图软件生成的html直接转化，特别是Claude code再也不用担心官方Figma MCP导入收费，也不用担心非官网MCP导入总会出现这样哪些的问题了，Claude code生成的html ，直接在插件中添加文件导入Figma ，简直不要太爽啦～～

一、简单介绍下

html.to.design是一个Figma插件，做的事情非常直接——把任何网页变成可编辑的 Figma设计稿。

你给它一个网址，它去解析那个网页的 HTML和CSS，然后把解析结果生成一份完整的Figma文件。

整个网页不再是一张截图，而是变成了一份完全可编辑的 Figma设计稿，文字、按钮、图片、间距，全是独立的图层，Auto Layout都帮你设好了，那你可以在此基础上任意的修改，无需从0开始搭建，轻松搞定喜欢的页面。

你可以理解为，以前你对着网页手工复刻，现在让这个插件替你干了。

二、有哪些能力

1、一键1:1还原网页，想要的效果直接拷贝

一键还原，图层完全可编辑，这是最核心的能力。

插件解析完网页之后，输出的结果跟你自己画的 Figma文件几乎一样——文字是Text Layer，按钮是带圆角的 Frame，图片是独立的填充图层，间距和布局都有，不是那种整张截图贴进来的糊弄方案，是真的拆开了、能改的。

这样你看到好的竞品就不用截图了，直接拿来就能用了。

2、Claude code等设计稿直接导入figma 编辑

如果你用Claude code、Cursor等工具全流程分析并生成设计方案的，但在最后细节方面需要自己微调，又不想花费官网figma mcp的费用，就可以直接将产出的html文件复制到插件里，就会得到你想要的可编辑的设计稿，在手动方案省掉你90%的时间和精力；

3.导入设计稿细节处理

1）自动生成 Auto Layout

这个挺关键的。很多设计师拿到一份从网页还原的设计稿，最头疼的事情就是间距和对齐乱七八糟，改一个元素其他全跟着错位。

html.to.design在导入的时候会自动识别网页的Flexbox和Grid布局，然后给你生成对应的Auto Layout。这意味着你改一个卡片的内容，其他卡片会自动跟着调整，不用手动重新对齐。

2）支持多端尺寸同时导入

你可以选择同时导入 Desktop、Tablet、Mobile 三种尺寸的版本。

一个命令下去，三种视口的页面全部生成，排好放在画布上。做响应式设计的时候，这个功能省的时间不是一点点。

3）还能生成Hover交互原型

它会自动识别网页上的hover效果，然后在 Figma里生成带变体的组件。也就是说，导入完之后你的按钮就已经有正常态和hover态了，直接可以拿来做原型演示。

4）Chrome 扩展：私有页面也能导

这个是很多人不知道的。有些页面你需要先登录才能看到，或者是在内网里的页面，插件没法直接访问。

html.to.design提供了一个Chrome扩展，你在浏览器里打开那个页面，点一下扩展图标，它会生成一个.h2d 文件，你把这个文件拖进Figma 插件里就行。

等于说，你在浏览器里看到什么，就能导什么。

三、还可用在那些场景

• 竞品分析

做竞品分析的时候，你需要把竞品的页面拆开来看——用了什么布局模式、间距规则是什么、组件结构怎么组织的。

以前的做法是截图+标注工具一点点量。现在你直接把竞品页面导入Figma，所有图层都拆好了，选中一个组件就能看到它的间距、圆角、字体大小，效率提升不是一点半点。

• 改版重设计

接到一个网站改版的需求，你不需要从零开始画。

先把现有网站导入Figma，在已有的图层上直接改，换个配色、调整一下布局、改改文案，一版改版方案很快就出来了，这比你在空白画布上从零搭建快得多，而且你改的时候原始的页面结构是完整的，不会漏掉某个区块。

• 快速收集设计素材和灵感

看到某个网站的卡片设计做得好看，某个表单的交互很优雅，直接导进来，拆开看它是怎么实现的，比截图收藏有用得多，因为你能看到每个元素的具体参数。

• 搭建设计系统的参考

你团队要做一套设计系统，可以先把你认为做得好的几个网站都导入Figma，然后从中提取组件、颜色、间距规范；

不是照抄，是把这些好的设计拆解成你自己的设计语言。有真实的参考摆在那里，比你凭空想一套设计系统靠谱得多。

• 快速 MVP 和提案

你需要给老板或客户看一个设计方案的雏形，不需要从零开始做。

找一个风格接近的参考网站，导进来，改成你的内容，换个品牌色，一份看起来很完整的方案就出来了。提案的时候拿着这个，比几张草图有说服力太多了。

四、怎么用呢

非常简单，三步搞定

第一步，打开插件

在 Figma 里社区直接搜索添加，或者底部导航栏点 Actions > Plugins，搜索 html.to.design，点一下就打开了。

第二步，复制粘贴URL

在插件顶部的输入框里粘贴你要导入的网页地址。如果你要导入多个页面，可以按Tab键逐个添加。（比如我拿掘金的网页试了一下）;

也可以选择文件上传等，有多个方式支持上传，看自己的内容是什么格式即可；

第三步，配置参数然后点Import

导入之前有一些配置选项。你可以选择要不要自动生成Auto Layout、要不要把 hover效果转成组件变体、要不要导入样式和变量、选哪些视口尺寸、深色还是浅色主题。配置完点Import，等几秒钟就好。

如果你要导入的是需要登录的私有页面，如果导入网页有一些不知名的问题，就用 Chrome扩展。在浏览器里打开那个页面，点扩展图标，下载.h2d文件，然后把文件拖进 Figma插件窗口里就行。

第一个，复杂动画和 JS 交互导不了。它导出的是静态的 HTML/CSS结构，网页上的滚动动画、弹窗交互、Canvas 绘制这些，它抓不到。它本质上是在解析DOM结构，不是在录屏。

第二个，有些网页的还原度不是100%。特别复杂的布局、用了大量绝对定位的页面、或者CSS写得比较野的网站，导入之后可能需要在Figma里手动修一些对齐和间距。

第三个，免费版每月只能导入10次。如果你是重度用户，Pro版是每月12美元，不限次数，还支持高清图片和批量导入。说实话这个价格对于设计师来说不贵，省下来的时间远不止这点钱。

说真的，我用了一段时间之后，最大的感受是它改变的不是某个具体的操作，而是设计师对待参考设计的方式。

以前看到一个设计做得好的网页，你能做的就是截图保存；

现在你可以在十秒之内把那个网页变成你 Figma 里的一份可编辑文件。你能拆开看每个组件是怎么搭的，你能在它的基础上改出你自己的版本，你能把好的设计模式直接用在自己的项目里。

这不是在抄，这是在高效地学习和借鉴，设计师的工作本来就应该花更多时间在创意和决策上；