捕获在浏览器中打开的页面作为 Figma 可编辑的 .h2f 文件。免费,无需帐户。
将浏览器中已打开的页面转换为可编辑的 Figma 图层。
当普通 URL 导入器无法看到与您相同的页面状态时,HTML 到 Figma Capture 非常有用。从已打开的浏览器选项卡捕获公共页面、本地主机项目以及许多登录或私有工作区视图。
它是如何运作的
1. 打开您要捕获的页面。
2. 选择全页或区域捕获、响应宽度以及浏览器、浅色或深色外观。
3. 下载一个本地 .h2f 文件,或输入 HTML to Figma 插件显示的一次性配对代码,然后选择 Figma 插件交付。
4. 将下载的文件导入或接收 HTML 格式的配对捕获到 Figma 以创建可编辑图层。
特征
- 全页捕获
- 通过 Shift 键单击进行单个或有序的多区域选择,包括嵌套打开的 Shadow DOM
- 当前窗口、宽屏、台式机、笔记本电脑、平板电脑、移动设备和自定义宽度
- 每个选定视口的浏览器、浅色和深色外观
- 在一个 .h2f 文件中捕获多个视口和外观
- 可选的交互状态变体和更高分辨率的响应图像
- 本地下载或直接配对传送到 HTML to Figma 插件
- 通过配套插件可编辑文本、图像、图层和支持的自动布局结构
- 捕获进度、可操作的错误、重试和隐私安全诊断
- 无需分机帐户
- 免费使用
0.3.0 中的新增功能
- 在单个工作流程中捕获多个选定区域。
- 将响应式宽度与浏览器、浅色和深色外观相结合。
- 使用一次性配对代码将捕获发送到 Figma 插件。
- 启用可选的交互式状态捕获和更高分辨率的图像。
- 改进了捕获清理、部分故障报告和恢复。
本地下载和可选的直接交付
默认为本地下载。如果您选择 Figma 插件并输入其一次性配对代码,则扩展程序会通过 api.htmltofigma.com 上的短暂内存中继通过 HTTPS 发送压缩的 .h2f 字节。该插件验证并消耗文件导入使用的相同字节。如果直接传送失败,扩展程序会自动通过 Chrome 下载保存已完成的捕获。可读的调试 JSON 始终下载到本地。
捕捉笔记
浅色和深色模拟浏览器的颜色方案首选项。具有自己的主题控件的网站可能会保持相同的外观。
支持开放 Shadow DOM。封闭的 Shadow DOM 和一些受保护的跨域内容具有捕获限制。 Chrome 不允许扩展程序捕获内部浏览器页面或 Chrome Web Store。如果您想捕获支持的 file:// 页面,请在 Chrome 中启用文件访问。
.h2f 文件包含捕获的页面内容和引用的资源或链接。当源页面是私人页面时,请在共享之前查看它。
需要配套的 HTML to Figma 插件才能将捕获的内容转换为可编辑的 Figma 图层。此扩展不提供直接复制并粘贴到 Figma 画布上的本机复制和粘贴交付。
网站:https://htmltofigma.com/
隐私政策:https://htmltofigma.com/privacy-policy
支持:https://htmltofigma.com/support
Figma插件:https://www.figma.com/community/plugin/1623696388918110490/html-to-figma-by-storyship-import-any-website-to-figma-designs-web-html





