【最佳实践】将网页转为可编辑的Axure

有时候我们看到一个设计很精美的axure页面，想着直接拿到自己的axure上去使用，这样既能提高效率又能偷懒。

但是直接复制和截图的方式，其实都无法直接将页面转为可编辑的Axure

接下来我出一个详细的页面转Axure的完成教程，一步一步做即可

整体使用流程：

• 打开一个Axure的链接

• 使用浏览器插件Drafito，将页面保存为Figma数据

• 使用Drafito将页面导入到Figma

• 在Figma，使用Axuer插件复制到Axure

注意：仅支持Axure9.0以上版本

第一步：注册Figma账号

https://www.figma.com/login?is_not_gen_0=true

打开链接，使用QQ邮箱进行注册即可

注册成功后，去QQ邮箱验证，验证完成后，账号就注册好了

第二步：安装Drafito插件

我们需要一个浏览器插件，在打开一个axure链接浏览页面的时候，将页面导入到Figma

插件下载链接，在右上角下载

下载后解压到D盘目录下

注意， 插件加载后路径就不能改变，改变后插件无法使用

插件可以在各个浏览器使用，使用方法基本一样，这里以谷歌为例

打开浏览器-管理拓展程序

打开【开发者模式】，才会显示下面的操作

点击【加载已解压的拓展程序】

选择目录为：D:axure插件�.0.1_0

点击【选择文件夹】，插件安装成功

在浏览器打开拓展程序，将插件显示出来，方便后续操作

第三步：转换网页HTML

我们打开百度，baidu.com

点击打开插件，然后点击橙色的按钮，意思是导出到Figma，实际是将网页导出一个json文件

出现下面的效果，HTML就转换成功，json文件要保存好

接下来我们尝试转换一个axure的网页

https://new.pmmaster.cc/1032.html

这是我设计的PRD框架，打开的是axure预览页面，重复上面的操作

点击橙色的操作，这样就导出转换完成了

第一个操作是导出所有页面，但是测试后发现不成功

第四步：导入到Figma

使用注册的账号登录Figma，找到Team project，然后可以打开默认的项目或者自己新建一个设计项目

我这里新建一个新的项目，点击【Design file】，新建一个空的项目

点击顶部插件的图标，然后搜索“Drafito”

点击Drafito打开，然后点击中间的地方上传下载好的json文件

选择自己要导入的json，然后点击打开

导入成功，网页已经完全变成可以设计编辑的设计稿

点击这里，添加一个新的页面

导入PRD框架的页面，因为使用内联框架的原因中间是空白的，这个是正常的。

第五步：复制到Axure

完成前面的四步后，已经把网页变成设计稿了，最后一步就是设计稿复制到Axure，这里需要用到Axure官方的插件，而且只能在Figma使用

点击顶部插件的图标，然后搜索“AXURE”

点击【copy all frames for rp】，意思是复制整个页面到Axure

第一个是复制选择的部分到Axure，根据自己需求去选择

点击 后，出现一个等待的弹窗，此时正在转换为Axure

出现这个提示，就表示转换成功，已经自动保存在剪贴板

打开Axure9 以上的版本，直接Ctrl+V，页面设计稿就直接复制到Axure了

之后你就可以对页面进行设计，修改。

温馨提示：

• 复制的主要是网页的设计元素，交互是不会带过来的

• 目前只能单个页面单个页面的复制

• 复制到Axure后可能会有一些设计元素需要自己调整

• 不过已经可以满足大多数抄作业的需求