Framer作为一款专业的网站设计工具,深受广大设计师的喜爱。它可以快速生成交互原型,大大简化了网站设计的流程。
近日,Framer推出了全新的HTML to Framer谷歌浏览器插件,这个插件类似于之前我们介绍过的Figma插件html to design。
该谷歌浏览器插件可以一键自动提取任何网站的HTML结构和样式信息,将其转换为Framer项目。也就是说,设计师可以选择任意一个网站,使用该插件即可秒级克隆出一个完整的Framer项目,所有元素和样式信息都完美还原。
使用该谷歌浏览器插件非常简单。点击下方链接安装谷歌浏览器插件HTML to Framer，同时用谷歌浏览器打开Framer。
安装插件后,设计师只需浏览自己的网站或任意其他网站,悬停在一个元素上就可以复制它。
如果按住Shift键,则可以批量复制多个元素,实现超高速克隆。如果在悬停元素时按Esc键,可以复制该元素的父容器。然后在Framer中粘贴即可。
复制的代码会经过整理,删除空div等无用代码,保证了层次结构的清晰。这使得设计师可以非常容易地对页面进行进一步编辑,添加断点,并快速发布网站。
这对于网站设计来说意味着什么呢?一般从零开始设计一个网站需要耗费大量时间,需要设计页面结构、布局样式、交互逻辑等。有了这个扩展,设计师可以直接克隆已有网站,基于这个基础再进行定制和优化,极大地缩短了设计周期。
HTML to Framer谷歌浏览器插件为Framer提供了强大的网站逆向工程功能。
根据官方的公告这个插件无法一次性复制整个网站，如果需要一次性复制整个网站html to design插件更实用。
https://ui.marklion.cn/article/7e6/12/article-2c7c7ee1f0156720.shtml
