海贼旗在呼唤着我

使用Sketch 新功能 library 建立图标库 #设计

2017.10.16

常久没有更新,这次借着 sketch 47新功能的发布,聊聊一下如何用上最新的 library。

关于Library

简单来说就是 ps 中的库, sketch 上的Craft 插件也有同样的功能。Library 相当于一个公用的 symbol。Library 中的 sketch 文件里面的 symbol 可以用于所有地方。这让 symbol 更加强大,也更加便于团队协作和共享。以后网上的 sketch 资源使用起来会更加方便。

图标库

每个项目、每个团队都有自己的一套图标库。以前都是 svg 或其他文件,在使用时拖入到 sketch 中。诞生了许多图标库管理 app,如Iconjar、Svgsus等等。虽然管理上比较方便,但使用时依然需要重新调整、加入 symbol 中才能使用。更不用说协作和更新上的问题。
用Library 的思路是,通过 sketch 绘制的图标可以直接使用,不会产生诸多软件上的问题。Library 解决了实时同步、更新的问题。把 Library 放在公用文件夹(如坚果云、dropbox 等)可以保持团队协作。唯一的遗憾是图标库查找不太方便,特别是数量巨多的图标。只能通过分组管理来解决一部分。

具体操作如下:

  1. 新建 sketch 文件,执行命令:File>Add Library

加入到 Library

  1. 绘制 icon,并添加到 symbol。

    把绘制好的图标加入到 symbol 中。推荐使用 automate 插件来进行批量添加。

添加到 symbol

ps:图标绘制完成后只有添加到 symbol 的画板才能被识别出来。注意做好分组管理

添加到 symbol

automate 还可以为多个图标同时添加边框,保证大小统一。

批量添加边框

使用图标库
打开任何 sketch 文件,在 symbol 中可以浏览刚刚添加的图标。完成( ^ω^ )

使用图标库

更多说明

  1. 图标绘制完成后可以制作成字体图标,设计和开发的使用都更加方便。
  2. 由于 symbol 中浏览图标不是很直观,也无法搜索。所以一定要做好分类管理。
  3. library 不仅可以制作图标库。把基础的设计组件放入 library中,让设计速度飞起来~~

    最后分享一个我添加的文件,加入 Library 即可使用。图标来自于 material icon,感谢 google!图标库下载


    以上为阿布的个人笔记,仅供参考,欢迎讨论。
    谢谢阅读!

Comments
Write a Comment