Sketch Iconfont - Sketch字体图标管理插件

RILL 0人评论 9575次浏览 MAC软件
摘要 : Sketch Iconfont是一款帮助你轻松插入和管理字体图标的Sketch插件。

Sketch Iconfont背景简介

关于Sketch

Photoshop和Sketch在日常的设计工作中都不是必不可少的,Photoshop设计界的老大哥、吃瓜群众眼中的ps,它是迄今为止世界上最畅销的图像处理编辑软件。Sketch设计界新晋新星,它是一款轻量、易用的矢量设计工具。UI设计为什么选择Sketch?一个比喻非常形象的告诉我们“在 PS 中设计 UI,就像你要切纸的时候本来只需要一把剪刀,但你拿到的却是一把链锯。”而且新的设计师上手PS比上手Sketch要难得多。另外,Sketch还有一个优势就是丰富的插件库,sketch强大的插件能够为交互和UI设计师节省很多时间成本,提高工作的效率。总之一句话Sketch让UI设计更加简单、高效,只可惜Sketch只能在Mac上使用。今天介绍的Sketch Iconfont就是其中一款Sketch插件。

Sketch

关于icon

在日常的设计工作中,icon 是离不开的设计元素,通常会下载一些 icon 素材文件。当使用时,打开素材文件,然后把要使用的 icon 粘贴到 Sketch中。但是,当你有大量的 icon 素材时,想要管理和查找 icon 就变得十分困难了。Sketch Iconfont 可以帮我们很好来管理我们的 icon素材。

关于IconFont
在介绍这个插件之前,我们需要先了解一个概念,图标字体 (IconFont)。简单来说,就是将图标生成为字体文件,和平时使用的字体文件是一样的。IconFont 一般应用在前端开发当中,在 CSS3 中被引入,将图标当做文字显示,可以很大程度上解决图标显示以及屏幕适配的问题。目前也有很多成熟的 IconFont 可以供我们直接使用,当然你也可以自己制作 IconFont 来供自己使用。

Sketch Iconfont 就是可以在 Sketch 中轻松插入和管理图标字体的插件。安装好后,图标就以字体的形式输出至软件里,可编辑,可以转换成形状,如果你的sketch需要更新版本那么需要注意的是在更新前把图标字体导出字体包,sketch更新完后再安装导出的字体包以保留自定义字体。

Sketch Iconfont安装说明

1、安装Sketch Iconfont
下载并解压:sketch-iconfont-master.zip
双击 iconfont.sketchplugin 完成安装
2、安装 Font Bundle
安装好 Sketch Iconfont 之后,你会发现这个插件还不能使用。既然是管理 IconFont 的插件,第一件事情就是要先安装 IconFont,然后才能进行管理。Plugin 的作者为了方便使用,提供了一个 Font Bundle, 里面包括了多个比较热门的 IconFont,安装后就可以使用了。
下载并解压: font-bundles-master.zip
打开 ttf-files 文件夹,依次安装里面的字体;
打开 Sketch,点击 Plugins -> Icon Font -> Install a Font-Bundle;
在弹出的对话框中,选择 font-bundles-master 文件夹,然后点击 Open;

安装 Font Bundle-选择 Font Bundle 文件夹

现在就可以正式开始使用 Sketch Iconfont 了。

Sketch Iconfont使用方法

一、插入 icon
打开 Sketch,点击 Plugins -> Icon Font -> Grid Insert 然后选中其中一个 IconFont,就可以看到这个 IconFont 所包含的所有 icon 了。点击一个需要的 icon,就插入到 Sketch 中了。可以通过搜索关键字,来找到自己想要的 icon。
点击 Plugins ->  Icon Font -> All Insert,可以查看所有已经安装的 IconFont。
二、icon 转曲
通过 Sketch Iconfont 插入到 Sketch 中的 icon,此时是被当做文字对象来处理的,你可以更改文字的大小,来改变 icon 的大小,但是我们有时候,更多的是以一个矢量对象来处理 icon,此时就要进行转曲的操作。
方法1: 可以通过 Sketch 自带的命令进行转曲,选中要转曲的 icon,点击 Layer -> Convert to Outlines 或者点击快捷键 Shift + Command + O
方法2: 可以使用 Sketch Iconfont 自带的命令进行转曲,选中要转曲的 icon,点击 Plugins -> Icon Font -> Convert Icons [Outlines]

icon 转曲-将文字对象转为矢量对象

三、制作自己的 IconFont
如果现成的 IconFont 无法满足我们的需求,我们可以自己制作 IconFont,将我们自己设计的 icon 或者收集的 icon 素材,都放到 Sketch Iconfont 来管理。Plugin 作者也提供了视频教程。
1、将需要制作成 IconFont 的 icon,导出为 SVG 格式的文件。
2、 访问 Fontello 网站,将导出的 SVG 格式的 icon,拖入到网站中。
3、 在网站最上面的 Custom Icons 的 tab 中,可以看到导入的 icon,选中自己需要的 icon,在右上角输入自己想要的 Font 名称,之后点击旁边的  Download webfont 按钮。
Sketch Iconfont使用方法-通过 Fontello 网站,制作自己的 IconFont
4、将下载下来的文件进行解压,打开 font 文件夹,安装 .ttf 后缀的字体到电脑中。
制作自己的 IconFont-安装 .ttf 后缀字体
5、打开 Sketch ,点击 Plugins -> Icon Font -> Install / Remove -> Install a Font [SVG],在弹出的对话框中,选择 font 文件夹中的 .svg 后缀的文件,点击 Open。
制作自己的 IconFont-导入 .svg 后缀文件
现在,就可以通过 Sketch Iconfont 来插入你自己制作的 IconFont 了。
四、删除 IconFont
如果想要删除之前导入的 IconFont,点击 Plugins -> Icon Font -> Install / Remove -> Remove a Font,在弹出的对话框中,选择想要删除的 IconFont,点击 Remove this font,就可以删除了。
删除已导入的 IconFont
五、导出 Font Bundle
还记得我们安装过 Plugin 作者提供给我们的 Font Bundle 吗? Font Bundle 是为了方便同时导入多个 IconFont,而不用一个一个字体的导入。我们可以通过导出自己的 Font Bundle,来备份我们安装过的 IconFont,也可以分享给自己的小伙伴或者同事。
点击 Plugins -> Icon Font -> Install / Remove -> Export your Font Bundle,在弹出的对话框中,选择要导出 Font Bundle 的目录位置,点击 Open。
导出 Font Bundle-选择要导出 Font Bundle 的目录位置
然后,将导出的 Font Bundle 文件夹,分享给需要的小伙伴就可以了,使用方法和上面提到安装 Plugin 作者提供的 Font Bundle 是一样的。
提醒导出的 Font Bundle,是不包含字体文件的,记得从字体册中,将字体文件拷贝出来。否则安装了 Font Bundle,也是无法使用的。

Sketch Iconfont 通过 IconFont提供了一个很好的 icon 使用和管理的解决方案。不仅可以安装使用现有的 IconFont,也可以使用自己制作的 IconFont 。从而将之前 Sketch 的 icon 素材,都统一管理起来。通过导出 Font Bundle,还可以达到备份功能,或设计团队间的协作需求。

Sketch Iconfont联系方式

https://github.com/keremciu/sketch-iconfont

http://sketch.cm/plugins/42

Fontello 网站:http://fontello.com/

sketch中文网:http://www.sketchcn.com/

文章参考:https://sspai.com/post/40502

Sketch Iconfont - Sketch字体图标管理插件下载地址

点击下载Sketch Iconfont - Sketch字体图标管理插件

转载必须注明来自: Chrome插件 » Sketch Iconfont - Sketch字体图标管理插件

字体变大插件

字体变大插件

0 人评论 16647 次人浏览 4.0分 4.0 分
字体变大是一款可以帮助用户把chrome浏览器中的默认字体变得更大的谷歌浏览器插件。
字体变小插件

字体变小插件

0 人评论 8971 次人浏览 3.0分 3.0 分
字体变小是一款可以把chrome网页中显示的字体变得更小的谷歌浏览器插件。
Chrono下载管理器

Chrono下载管理器

2 人评论 117154 次人浏览 4.1分 4.1 分
Chrono下载管理器是一款可以替代chrome自带下载器的功能非常全面的下载管理工具。有了Chrono下载管理器你的所有下载管理工作都在浏览器中完成,而不需要安装另外的程序。
Axure谷歌浏览器插件

Axure谷歌浏览器插件

1 人评论 90040 次人浏览 3.2分 3.2 分
Axure谷歌浏览器插件是一款可以帮助用户在chrome谷歌浏览器显示生成的HTML原型的扩展程序。
二管家

二管家

0 人评论 11316 次人浏览 4.0分 4.0 分
二管家是一款可以管理chrome扩展程序的插件,是一个全能的拓展管理和用户脚本管理拓展程序。
Path Finder - Mac文件管理

Path Finder - Mac文件管理

0 人评论 1846 次人浏览 4.0分 4.0 分
Path Finder是一款Mac平台强大的文件管理工具,可以轻松访问文件、在可自定义模块的双窗格视图中并排处理文件。
Hello雅黑

Hello雅黑

0 人评论 6689 次人浏览 4.0分 4.0 分
Hello雅黑是一款简单而实用的chrome微软雅黑字体插件,主要用于将页面的字体替换为微软雅黑字体,使页面看上去更加舒适。
Tab Manager Plus for Chrome

Tab Manager Plus for Chrome

0 人评论 2903 次人浏览 3.0分 3.0 分
Tab manager plus for Chrome是一款标签页管理插件,他可以将所有标签页以图标的形式排列,还支持搜寻标题、钉选等实用功能等。
蓝猫微会 [新一代视频会议]

蓝猫微会 [新一代视频会议]

0 人评论 49 次人浏览 3.0分 3.0 分
蓝猫微会是一款界面清晰、功能全面、专业实用的办公软件。蓝猫微会支持移动端iPhone版、Android版以及Mac版、Windows版,开启无界沟通,自研一体机、轻松部署、一键参会,高性能芯片、抗网络抖动、防丢包,多层加密、私有化部署,设备管理、实时监控、故障自动上报!
评论:(0)

已有 0 位网友发表了一针见血的评论,你还等什么?