使用 html.to.design,将任何网站转换为完全可编辑的 Figma 设计。即使是登录后的私人网页 ✨ 利用现有网站并将其 html 导入 Figma 以开始您自己的设计,而无需从头开始构建每个元素。
插件说明
使用 html.to.design,将任何网站转换为完全可编辑的 Figma 设计。即使是登录后的私人网页 ✨ 利用现有网站并将其 html 导入 Figma 以开始您自己的设计,而无需从头开始构建每个元素。
在继续之前,请注意此 Chrome 扩展程序是 html.to.design Figma 插件的伴侣,您需要先安装 Figma 插件。
怎么运行的:
1. 单击“添加到 Chrome”安装 html.to.design Chrome 扩展程序。
2. 导航并登录到您要导入 Figma 的页面。 (此扩展程序专为登录后的私人页面设计。要导入公共网站,您可以使用我们的 Figma 插件,而无需 Chrome 扩展程序)。
3. 单击 Chrome 顶部栏中的 html.to.design 扩展程序图标。
4. 扩展程序将自动开始从页面中提取 html。 (您会在浏览器中看到以下消息:`html.to.design 开始调试此浏览器`。别担心,这意味着一切都按预期工作。)
5. 下载完成后,前往 Figma 并启动 html.to.design 插件。
6. 你会看到一个大框,你可以直接拖放Chrome扩展程序生成和下载的文件。
7. html.to.design 将立即开始将页面导入 Figma,一切就绪!
8. 快乐设计!
插件安装说明
1、在打开的谷歌浏览器的扩展管理器
就是点击最左侧的三个点,在弹出的菜单中选择【更多工具】——【扩展程序】
或者你可以在地址栏中直接输入chrome://extensions/
2、进入扩展程序页面后将开发者模式打勾
3、最后将解压出来的crx文件拖入到浏览器中即可安装添加
4、如果出现无法添加到个人目录中的情况,可以将crx文件右键,然后选择【管理员取得所有权】,再尝试重新安装
5、安装好后即可使用

扫码关注公众号,发【识别码】获取