有时候我们看到一个设计很精美的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后可能会有一些设计元素需要自己调整
-
不过已经可以满足大多数抄作业的需求
主题授权提示:请在后台主题设置-主题授权-激活主题的正版授权,授权购买:RiTheme官网
关于下载
本站分享的产品前端、B端竞品和所有付费资源,均不是该资源的价格,本身资源是不用付费的,这是赞助知识库资源模板的收集整理、服务器维护的基础开销费用!免责声明
1、本站分享的产品前端、B端竞品和产品知识库主要来源于网络的公开信息,均为网络搜索,微信缓存,免费下载,互联网平台整理而来,产品知识库的资料文档仅限用于学习交流。如若有侵权你的知识版权的嫌疑,请及时告知我们,我们会在24小时内进行删除。联系管理员:2841552294@qq.com2、上述资源和模板的知识产权及相关权利归作者及制作公司所有。
3、上述资源和模板仅供学习参考及技术交流之用,未经源码的知识产权权利人同意,用户不得进行商业使用。
4、上述资源和模板如需商业使用,请自行联系源码知识产权权利人进行授权,否则,我们将积极配合作品知识产权权利人 一起维权。
5、上述资源和模板如有侵犯您的知识产权,请您立刻联系我们,我们会在24小时内做删除下架处理。