功能
完整的 HTML to Figma 工具箱
从单个 URL 到多页面、响应式、懂设计系统的 Figma 文件。这里是 HTML to Frames 能做的一切——以及它是怎么做到的。
从任何地方导入
五种来源，覆盖公开网站、电脑上的文件、只有你的浏览器能看到的页面，以及 AI 编写的代码。
Link
粘贴任意公开网址。页面在隔离的浏览器中渲染，懒加载内容会被滚动加载出来，并可按需隐藏 Cookie 横幅和弹窗。
Multiple 导入
每次导入最多 10 个链接，依次处理。每个页面在画布上各占一行屏幕。所有方案均包含——无需 Pro。
本地文件与粘贴代码
拖入 HTML 文件、整个网站文件夹或 .zip，并选择要导入的页面——也可以直接粘贴 HTML/CSS。文件从内存中提供，导入完成后即删除。
Chrome 扩展
抓取已登录的后台、localhost、内网以及页面的当前状态。选择单个元素或整页，然后粘贴或使用 Send to Figma。
通过 MCP 连接 AI 工具
连接 Claude Code、Claude Desktop、Cursor 或任意 MCP 客户端。它们调用 import_html 或 import_url，页面就会落到你打开的插件中。
导入关联页面与重新导入
导入完成后，可从列表中选择同一网站的更多页面。之后可随时用一键 Re-import（重新导入）更新任意框架。
与真实网站一致的屏幕
响应式设计不只是三张截图。HTML to Frames 会分别渲染每个宽度，让你得到真实的平板和手机布局。
Site width，实测得出
桌面端按网站实际设计宽度打开：通栏布局为 1920 并居中内容盒，盒式网站取盒子宽度，流式网站为 1440。
Responsive set
一键获得桌面 + 平板 768 + 手机 390；Pro 还提供笔记本 1280 和自定义宽度。各屏幕并行抓取。
整洁的画布排布
每个页面一行，屏幕并排摆放，框架命名形如 yoursite.com/pricing — Desktop (1920)。
值得信赖的自动布局（Auto Layout）
HTML to Frames 的核心。Auto Layout 从真实的浏览器几何信息推断、应用并校验——从不凭空假设。
堆叠、行与网格
根据每个子元素的实测位置，推断垂直和水平堆叠、换行、间距、内边距与对齐方式。
响应式语义
居中内容保持居中，等宽卡片自动填充，最大宽度容器保持在中间，占位元素自动拉伸——框架缩放起来和网站一样。
2 px 以内校验
应用 Auto Layout 后，每个子元素的位置都会与浏览器比对。如有偏移就尝试更简单的方案；否则该框架保留精确位置。
智能约束
保留绝对位置的框架会获得 Stretch、Scale、Center 或 Min/Max 约束，缩放时依然表现正常。
诊断信息
结果页面会列出每个框架保留绝对定位的原因——间距不均、元素重叠、文字大小不一——一切都有据可查。
提取设计系统
把网站的颜色、字体和重复 UI 变成 Figma 设计系统的基础构件——或映射到你自己的设计系统上。
颜色变量
最多 96 个颜色变量，放在“Colors · 域名”集合中，并按网站的 CSS 自定义属性命名（例如 --brand-primary → brand/primary）。
文本与阴影样式
最多 48 个按角色和字号命名的文本样式，以及从 sm 到 xl 的阴影样式。填充、描边和文字颜色都会绑定到变量。
复用而非重复
如果你的文件里已有相同取值的变量或样式，会直接使用。同一网站导入两次也不会新建任何内容。
Snap to my file's styles
近似值会基于感知色差，对齐到你自己设计系统中最接近的颜色和文本样式。
组件与悬停变体
重复的卡片、按钮和菜单项会变成组件和实例。悬停效果变成带悬停交互的 Default/Hover 变体。
浅色 + 深色
页面分别以浅色和深色配色方案读取，写入同一个包含两种模式的集合，并为每个屏幕生成深色副本。
细节级的还原度
真实的 CSS 往往很杂乱。HTML to Frames 处理好那些让页面“像它自己”的细节。
文本
同一段落中的混合样式、链接、字间距、行高、text-transform、上标和下标、CSS 计数器，以及与 Chrome 一致的列表标记。
填充
线性、径向和锥形渐变（包括 px 色标和平铺图案）、混合模式、不透明度、模糊与背景模糊、灰度滤镜。
形状与效果
SVG 转为可编辑矢量，圆角、内外阴影、文字阴影、单边边框、::before/::after、clip-path、mask-image、旋转和缩放。
嵌入内容
地图、iframe、WebGL 和没有封面的视频会以该区域的图片形式抓取，不会留下空白。
图片
高分辨率 srcset 图源、object-fit、background-size 和平铺背景。
字体
Missing fonts（缺失字体）界面会在生成之前建议替代字体，并为该网站记住你的选择。
原型与工作流
导入的页面可以直接点击浏览，也很容易保持更新。
可点击的链接
在演示模式下点击链接会打开对应 URL；导入页面之间的链接会变成 Navigate 交互。
固定、粘性与滚动
固定和粘性页头保持原位，轮播等水平滚动区域在原型中可以滚动。
折叠面板文字转为注释
可选：收起的折叠面板中隐藏的文字会添加为 Figma 注释，内容不会丢失。
参考截图
每个屏幕下方有一个隐藏、锁定的截图图层，用于像素级对比（Pro）。
常见问题
Free 包含所有导入来源、最多 10 个链接的 Multiple 导入、实测网站宽度、带校验的自动布局、字体映射、原型链接以及嵌入内容截图——每月 10 次导入，每次导入 1 个屏幕。样式与变量、组件、浅色 + 深色、自定义宽度和参考截图属于 Pro 功能。
支持。插件并不直接读取 CSS 规则来构建布局，而是使用浏览器实测的几何信息。只要结果与浏览器的误差在 2 px 以内，flexbox 和 grid 布局就会转换为 Auto Layout 堆叠和换行。
可以，在 Pro 方案中。对于桌面宽度的屏幕，抓取服务会强制链接和按钮进入悬停状态，与正常状态对比后生成 Default/Hover 变体，并附带悬停原型交互。由 JavaScript 在鼠标移入时打开的菜单不会被抓取。
斜切和 3D 变换、使用 path() 的 clip-path、多层蒙版以及 Display-P3 颜色暂不转换。嵌入的 canvas、地图和 iframe 会变成该区域的图片，而不是图层。
别再手动重画网页了。
粘贴一个链接，几秒钟就能得到真实、可编辑、响应式的 Figma 图层。免费起步——每月 10 次导入。
无需信用卡。Pro 直接在 Figma 内购买。
即将上架 Figma Community