快捷搜索:  汽车  科技

axure 元件添加快捷操作:实践干货 Axure插入图标的4种办法

axure 元件添加快捷操作:实践干货 Axure插入图标的4种办法首先找公司的前端同学拿到Element-UI的字体包文件,一般来说引入这些前端框架的时候都会把一些静态资源下载下来放在本地的。如果自己有动手能力,也可以自己搭建框架,然后将字体包文件拿出来。我们打开Element-UI的组件库,然后找到Icon图标这个菜单,发现这里有很多饿了么原生的的Icon,我很想要把它们弄到Axure里怎么办?而且方式也很简单,将想要的原型库加入到团队项目中,在实际开发的时候,开发同学也可以直接使用此图标,一举两得,十分高效。截止到目前,还有一个唯一的瑕疵没有解决,就是iconfont上没有Element-UI的图标,而我就是很强迫症非要找到它怎么办?接下来请看强迫症患者的终极解决方案,只要你够偏执,你总能找到办法。

复制SVG代码之后,粘贴在Axure中,然后右键将SVG图片转为形状,然后就可以自由的编辑(调色,改大小等)。

恰巧的是,我们团队中的项目的一些icon都是来源一个网站,而且这个网站也正好支持复制SVG代码的功能,它就是:阿里巴巴矢量图标库

axure 元件添加快捷操作:实践干货 Axure插入图标的4种办法(1)

选择你想要的的图标库,然后点击下载,在弹窗页面选择「复制SVG」,然后再粘贴到Axure中,最后再转SVG成形状,就可以自由编辑啦。

axure 元件添加快捷操作:实践干货 Axure插入图标的4种办法(2)

axure 元件添加快捷操作:实践干货 Axure插入图标的4种办法(3)

总结一下,SVG法很实用,也很方便。主要是iconfont目前的生态很好,有很多素材,而且完全是免费的,你想要的图标基本上都可以找得到,完全满足了我日常原型绘制的时候对图标的要求。

而且方式也很简单,将想要的原型库加入到团队项目中,在实际开发的时候,开发同学也可以直接使用此图标,一举两得,十分高效。

截止到目前,还有一个唯一的瑕疵没有解决,就是iconfont上没有Element-UI的图标,而我就是很强迫症非要找到它怎么办?

接下来请看强迫症患者的终极解决方案,只要你够偏执,你总能找到办法。

02 拓展:怎么获取Element-UI的图标

axure 元件添加快捷操作:实践干货 Axure插入图标的4种办法(4)

我们打开Element-UI的组件库,然后找到Icon图标这个菜单,发现这里有很多饿了么原生的的Icon,我很想要把它们弄到Axure里怎么办?

1. 干货来袭

首先找公司的前端同学拿到Element-UI的字体包文件,一般来说引入这些前端框架的时候都会把一些静态资源下载下来放在本地的。如果自己有动手能力,也可以自己搭建框架,然后将字体包文件拿出来。

axure 元件添加快捷操作:实践干货 Axure插入图标的4种办法(5)

猜您喜欢: