教程分享

Axture元件库教程(二):一键复制Iconfont图标到Axure

tagAxture元件库教程 元件库 教程 Iconfont  publish2020-12-18 14:45 view8646

在做Axure原型设计的时候,需要用到一些小图标,默认Axure的图标库并不丰富,所以就需要想办法导入其他图标

目前大家熟知的图标库,相信非阿里巴巴图标库莫属了。

阿里巴巴图标库:https://www.iconfont.cn/

那么如何方便快捷的使用阿里巴巴的iconfont图标呢,今天苏米教大家两个方法:

直接复制SVG到Axure

这个方法适用于Axure 9.0 以上版本,可通过直接复制SVG图标实现使用Iconfont图标

  1. 打开iconfont图标库,找到想要的图标>点击下载>复制SVG

description

  1. 回到Axure原型设计页,使用Ctrl + V 或右键 > 粘贴

description

  1. 选中icon,右键点击变换图像》将SVG格式转化为形状,可无损缩放及调整颜色。

description

Axhub插件

另外一种方式就是通过Axhub浏览器插件解决之前版本的图标复制与转换

Axhub插件下载地址:https://axhub.im/ic/

如果无法访问谷歌商店的用户,可以下载点击安装版下载crx文件拖拽到Chrome

使用Axhub插件,可以一键复制iconfont图标到 Axure,也可以在iconfont调整颜色或大小后再复制到Axure。当然也可以在Axure中转换为svg,无损缩放及调整颜色。

具体使用步骤:

  1. 打开浏览器,点击设置》更多工具》扩展程序;

description

  1. 进入扩展程序页面,将插件拖入,添加扩展程序;

description

  1. 打开iconfont,通过一键复制按钮,可快速复制到Axure中

description

description

  1. 进入Axure中,通过ctrl+v可直接粘贴成功。选中icon,右键点击变换图像》将SVG格式转化为形状,可无损缩放及调整颜色。

description

建立图标元件库

学会了复制iconfont图标可以直接通过新建元件库的形式建立自己的图标库

description

上一篇:Axture元件库教程(一):新建和加载元件库

下一篇:Axure RP 教程:制作滚动字幕效果,文字滚动的动态效果

这些你同样感兴趣

满足你在每个阶段使用模板的需求,帮助你高效完成工作及任务