sketch强大的插件能够为交互和UI设计师节省很多时间成本,提高工作的效率,今天来谈谈在做原型和UI需要用到的一款插件,插件名叫 icon font。将分三个方面带大伙来认识了解并掌握。
一、认识icon font插件
icon font实际上就是把图标转化成字体,以字体文件的形式安装,安装好后,图标就以字体的形式输出至软件里,可编辑,可以转换成形状,作者使用的sketch版本是48.1,如果你的sketch需要更新版本那么需要注意的是在更新前把图标字体导出字体包,sketch更新完后再安装导出的字体包以保留自定义字体。
二、icon font插件如何安装
插件的安装大致可以分为三个步骤,首先下载icon font插件 Icon Font.zip,双击 Icon Font.sketchplugin 完成安装,插件网址https://sketchapp.com/plugins。具体操作如下图所示:
第二步:1.安装 Font Bundles,执行 Plugins >icon font> What is a Font Bundles?,在弹出的框中点击底部的网址 https://github.com/keremciu/font-bundles,在新打开的页面下载fFont Bundles,解压 Font Bundles,双击安装 ttf-files 里的 otf / ttf文件。
2.执行 Plugins > icon font>Install a Font-Bundle 选中 Font Bundles 文件夹,完成安装。具体操作如下图所示:
三、icon font如何使用
这个插件的的强大之处是可以导入从图标网站下载下来的字体图标文件,首先我们打开http://fontello.com或者http://iconfont.cn,前面的是国外的,后者是国内阿里的,打开网址输入网址http://fontello.com,可以不用登录,然后输入关键词检索,制作一套通用的字体图标,具体操作具体操作如下图所示:
注:可以设计快捷键,格式一般是cmd ctr,比如我设置了快捷键cmd ctrl 2。
当sketch版本需要升级的时候,要记得把字体图标保存一份,在sketch升级好后,导入保存好的字体图标即可,保存字体文件操作如下图
:
最后来一波icon font的实际应用操作,执行 Plugins > icon font>Grid Insert > 选择对应的 Icon Font 弹出管理界面,点击相应图标插入到 Sketch 文档。具体操作如下图所示: